title: Zurb Foundation 4: How to change color of background of top-bar-section on hover?
body: <p>Zurb Foundation 4: How to change color of background of top-bar-section on hover?</p>
  
  <p>This method does not work:</p>
  
  <pre><code>.top-bar-section li a:hover:not(.button) {
      background: #222222;
    }
  </code></pre>
  
  <p>This method does not work:</p>
  
  <pre><code>.top-bar-section .button :hover {
      -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
      -webkit-transition: background-color 300ms ease-out;
      -moz-transition: background-color 300ms ease-out;
      transition: background-color 300ms ease-out;
  }
  </code></pre>
  
  <p>This method does not work:</p>
  
  <pre><code>/* Main Item selector */
  .top-bar-section li a:hover {
      color: #fff;
      background-color: #2ba6cb;
      -webkit-transition: background-color 300ms ease-out;
      -moz-transition: background-color 300ms ease-out;
      transition: background-color 300ms ease-out; }
  
  /* Dropdown Item selector */
  .top-bar-section li li a:hover {
      color: #2ba6cb;
      background-color: #fff;
      -webkit-transition: background-color 300ms ease-out;
      -moz-transition: background-color 300ms ease-out;
      transition: background-color 300ms ease-out; }
  </code></pre>
  
  <p>This method works BUT ONLY for the font color, it does NOT change the background color:</p>
  
  <pre><code>.top-bar-section ul li:hover &gt; a {
      color: #7ADAE8; 
      background: rgba(0,0,0,0);
  }
  </code></pre>
  
  <p>Here is my top bar code, it's fairly simple and straightforward:</p>
  
  <pre><code>    &lt;div class="sticky"&gt;
          &lt;nav class="top-bar"&gt;
              &lt;ul class="title-area"&gt;
                  &lt;li class="name"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;section class="top-bar-section"&gt;
                  &lt;ul class="left"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;food&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;drink&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;gallery&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;location&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;blog&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/section&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I've spent two full days on this, digging through the foundation.css over and over.  Any ideas?</p>
  
  <p>My <em>style.css</em> file:</p>
  
  <pre><code>body {
      background-image:url("../img/homepage-bkg-img.jpg");
      /*background: #FFFFFF;*/
      font-family: 'Advent Pro', san-serif;
      font-weight: 500;
      font-size: 20px;
  }
  
  .hero-text {
      font-family: 'Dorsa', san-serif;
      font-size: 275px;
      color: #FFF;
      line-height:80%;
  }
  
  .nav-menu-text {
      font-family: 'Wire One', san-serif;
      font-size: 30px;
      color: #FFF;
  }
  
  .scrollblock {
      margin: 0;
      width: 100%;
      height: 45px;
  }
  
  /* CENTERING TOP NAV */
  section.top-bar-section {
      float: left;
      left: 50% !important;
      position: relative;
  }
  
  section.top-bar-section ul.left {
      position: relative;
      right: 50%;
  }
  
  .top-bar:not(.expanded) {
      section.top-bar-section {
          float: right;
          left: 50% !important;
          position: relative;
          ul.left {
              position: relative;
              right: 50%;
          }
      }
  }
  
  /* TOP BAR */
  .top-bar {
      overflow: hidden;
      height: 45px;
      line-height: 45px;
      position: relative;
      background: rgba(0,0,0,0);
      margin-bottom: 0;
      /*
      background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,1) 100%); 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0.33)), color-stop(100%,rgba(0,0,0,1)));
      background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.33) 50%,rgba(0,0,0,1) 100%); 
      background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.33) 50%,rgba(0,0,0,1) 100%); 
      background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.33) 50%,rgba(0,0,0,1) 100%); 
      background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.33) 50%,rgba(0,0,0,1) 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
      */
  }
  
  .top-bar-section ul {
      width: 100%;
      font-size: 16px;
      margin: 0; 
      background: rgba(0,0,0,.75);
      /*
      background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 49%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(49%,rgba(255,255,255,0.5)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); 
      background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 49%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); 
      background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 49%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); 
      background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 49%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); 
      background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 49%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); 
      */
  
      /* Graident Background *//*
      background: -moz-linear-gradient(top,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,1)));
      background: -webkit-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,1) 100%); 
      background: -o-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,1) 100%); 
      background: -ms-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,1) 100%); 
      background: linear-gradient(to bottom,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,1) 100%); 
      */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  }
  
  .top-bar-section li a:not(.button) {
        padding: 0 15px;
        line-height: 45px;
        background: rgba(122,218,232,0);
  }
  
  .top-bar-section ul li:hover &gt; a {
      color: #7ADAE8; 
      background: rgba(0,0,0,0);
  }
  
  .top-bar-section ul li &gt; a {
      color: #FFFFFF;
      background: rgba(0,0,0,0);
  }
  
  /* Main Item selector */
  .top-bar-section li a:hover {
      color: #fff;
      background-color: #ff1199;
      -webkit-transition: background-color 300ms ease-out;
      -moz-transition: background-color 300ms ease-out;
      transition: background-color 300ms ease-out; 
  }
  
  .top-bar-section li a:not(.button):hover {
      background:red;
  }
  
  /* Dropdown Item selector */
  .top-bar-section li li a:hover {
      color: #ff4466;
      background-color: #fff;
      -webkit-transition: background-color 300ms ease-out;
      -moz-transition: background-color 300ms ease-out;
      transition: background-color 300ms ease-out; 
  }
  
  /* Food &amp; Drink Menu Header */
  fieldset {
    border: solid 1px #dddddd;
    padding: 1.25em;
    margin: 1.125em 0; }
    fieldset legend {
      font-weight: bold;
      color: #FFF;
      font-size: 24px;
      background: rgba(0,0,0,0);
      padding: 0 0.1875em;
      margin: 0;
      margin-left: -0.1875em; }
  
  /* Food &amp; Drink Menu Active Section Background */
  .section-container.auto &gt; section.active &gt; .title, .section-container.auto &gt; .section.active &gt; .title,
      .section-container.vertical-tabs &gt; section.active &gt; .title,
      .section-container.vertical-tabs &gt; .section.active &gt; .title,
      .section-container.vertical-nav &gt; section.active &gt; .title,
      .section-container.vertical-nav &gt; .section.active &gt; .title,
      .section-container.horizontal-nav &gt; section.active &gt; .title,
      .section-container.horizontal-nav &gt; .section.active &gt; .title,
      .section-container.accordion &gt; section.active &gt; .title,
      .section-container.accordion &gt; .section.active &gt; .title {
          background: #6EFF57; }
  
  /* Food &amp; Drink Menu Active Section */  
  .section-container.auto &gt; section.active &gt; .title a, .section-container.auto &gt; .section.active &gt; .title a,
      .section-container.vertical-tabs &gt; section.active &gt; .title a,
      .section-container.vertical-tabs &gt; .section.active &gt; .title a,
      .section-container.vertical-nav &gt; section.active &gt; .title a,
      .section-container.vertical-nav &gt; .section.active &gt; .title a,
      .section-container.horizontal-nav &gt; section.active &gt; .title a,
      .section-container.horizontal-nav &gt; .section.active &gt; .title a,
      .section-container.accordion &gt; section.active &gt; .title a,
      .section-container.accordion &gt; .section.active &gt; .title a {
          font-size: 30px;
          font-weight: bold;
          line-height:80%;
          color: #FFF; }
  
  /* Food &amp; Drink Menu Default Background */  
  .section-container.accordion {
    border-top: 0px solid #cccccc; }
    .section-container.auto &gt; section &gt; .title, .section-container.auto &gt; .section &gt; .title,
    .section-container.vertical-tabs &gt; section &gt; .title,
    .section-container.vertical-tabs &gt; .section &gt; .title,
    .section-container.vertical-nav &gt; section &gt; .title,
    .section-container.vertical-nav &gt; .section &gt; .title,
    .section-container.horizontal-nav &gt; section &gt; .title,
    .section-container.horizontal-nav &gt; .section &gt; .title,
    .section-container.accordion &gt; section &gt; .title,
    .section-container.accordion &gt; .section &gt; .title {
      background-color: #7ADAE8;
      cursor: pointer;
      border: solid 0px rgba(0,0,0,.5); }
  
  /* Food &amp; Drink Menu Hover Background */    
  .section-container.auto &gt; section &gt; .title:hover, .section-container.auto &gt; .section &gt; .title:hover,
      .section-container.vertical-tabs &gt; section &gt; .title:hover,
      .section-container.vertical-tabs &gt; .section &gt; .title:hover,
      .section-container.vertical-nav &gt; section &gt; .title:hover,
      .section-container.vertical-nav &gt; .section &gt; .title:hover,
      .section-container.horizontal-nav &gt; section &gt; .title:hover,
      .section-container.horizontal-nav &gt; .section &gt; .title:hover,
      .section-container.accordion &gt; section &gt; .title:hover,
      .section-container.accordion &gt; .section &gt; .title:hover {
        background-color: #87efff; }
  
  /* Food &amp; Drink Menu Description Background */  
  .section-container.auto &gt; section &gt; .content, .section-container.auto &gt; .section &gt; .content,
    .section-container.vertical-tabs &gt; section &gt; .content,
    .section-container.vertical-tabs &gt; .section &gt; .content,
    .section-container.vertical-nav &gt; section &gt; .content,
    .section-container.vertical-nav &gt; .section &gt; .content,
    .section-container.horizontal-nav &gt; section &gt; .content,
    .section-container.horizontal-nav &gt; .section &gt; .content,
    .section-container.accordion &gt; section &gt; .content,
    .section-container.accordion &gt; .section &gt; .content {
      padding: 0.9375em;
      background-color: #FFF;
      border: solid 0px #cccccc; }
  
  .price {
      font-size: 30px;
      font-weight: bold;
      line-height:10%;
      color: #000;;
  }
  
  /* DISABLE MOBILE TRANSFORM */
  @media only screen and (min-width: 0em) {
    .top-bar {
      background: rgba(0,0,0,0);
      *zoom: 1;
      overflow: visible; }
      .top-bar:before, .top-bar:after {
        content: " ";
        display: table; }
      .top-bar:after {
        clear: both; }
      .top-bar .toggle-topbar {
        display: none; }
      .top-bar .title-area {
        float: left; }
      .top-bar .name h1 a {
        width: auto; }
      .top-bar input,
      .top-bar .button {
        line-height: 2em;
        font-size: 0.875em;
        height: 2em;
        padding: 0 10px;
        position: relative;
        top: 8px; }
      .top-bar.expanded {
        background: rgba(0,0,0,0); }
  
    .contain-to-grid .top-bar {
      max-width: 62.5em;
      margin: 0 auto;
      margin-bottom: 0; }
  
    .top-bar-section {
      -webkit-transition: none 0 0;
      -moz-transition: none 0 0;
      transition: none 0 0;
      left: 0 !important; }
      .top-bar-section ul {
        width: auto;
        height: auto !important;
        display: inline; }
        .top-bar-section ul li {
          float: left; }
          .top-bar-section ul li .js-generated {
            display: none; }
      .top-bar-section li.hover &gt; a:not(.button) {
        background: black;
        color: white; }
      .top-bar-section li a:not(.button) {
        padding: 0 15px;
        line-height: 45px;
        background: rgba(0,0,0,0); }
        .top-bar-section li a:not(.button):hover {
          background: black; }
      .top-bar-section .has-dropdown &gt; a {
        padding-right: 35px !important; }
        .top-bar-section .has-dropdown &gt; a:after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border: inset 5px;
          border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
          border-top-style: solid;
          margin-top: -2.5px;
          top: 22.5px; }
      .top-bar-section .has-dropdown.moved {
        position: relative; }
        .top-bar-section .has-dropdown.moved &gt; .dropdown {
          display: none; }
      .top-bar-section .has-dropdown.hover &gt; .dropdown, .top-bar-section .has-dropdown.not-click:hover &gt; .dropdown {
        display: block; }
      .top-bar-section .has-dropdown .dropdown li.has-dropdown &gt; a:after {
        border: none;
        content: "\00bb";
        top: 1em;
        margin-top: -7px;
        right: 5px; }
      .top-bar-section .dropdown {
        left: 0;
        top: auto;
        background: transparent;
        min-width: 100%; }
        .top-bar-section .dropdown li a {
          color: white;
          line-height: 1;
          white-space: nowrap;
          padding: 7px 15px;
          background: #1e1e1e; }
        .top-bar-section .dropdown li label {
          white-space: nowrap;
          background: #1e1e1e; }
        .top-bar-section .dropdown li .dropdown {
          left: 100%;
          top: 0; }
      .top-bar-section &gt; ul &gt; .divider, .top-bar-section &gt; ul &gt; [role="separator"] {
        border-bottom: none;
        border-top: none;
        border-right: solid 1px #2b2b2b;
        border-left: solid 1px black;
        clear: none;
        height: 45px;
        width: 0; }
      .top-bar-section .has-form {
        background: #111111;
        padding: 0 15px;
        height: 45px; }
      .top-bar-section ul.right li .dropdown {
        left: auto;
        right: 0; }
        .top-bar-section ul.right li .dropdown li .dropdown {
          right: 100%; }
  
    .no-js .top-bar-section ul li:hover &gt; a {
      background: black;
      color: white; }
    .no-js .top-bar-section ul li:active &gt; a {
      background: #090909;
      color: white; }
    .no-js .top-bar-section .has-dropdown:hover &gt; .dropdown {
      display: block; } }
  
  /* Panels */
  .panel {
      border-style: solid;
      border-width: 1px;
      border-color: #d9d9d9;
      margin-bottom: 1.25em;
      padding: 1.25em;
      background: rgba(0,0,0,0.33);
   }
  
  .panel-header-text-color {
      font-family: 'Smythe', cursive;
      color: #FFF;
      font-size: 48px;
      line-height:80%;
  }
  
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p {
      color: #CCC;
  }
  </code></pre>