title: Zurb Foundation 4 top nav bar not changing color
body: <p>I'm learning <a href="http://foundation.zurb.com/" rel="nofollow">Zurb Foundation 4</a> from Lynda.com videos and documentations on Foundation's website.</p>
  
  <p>I have come to this problem when I create my top nav bar. It appears on Foundation's main website, and the training videos from Lynda that the top navigation bar's menu "names" will change colors when the mouse is over (<a href="http://foundation.zurb.com/" rel="nofollow">Zurb Foundation 4 official site</a>), as well as the button gradually changing color, which is beautiful! </p>
  
  <p>I build my navigation bar, and my menu names are not changing colors, my button on the navigation bar is not changing colors either (but these buttons do change color while being displayed on some other part of the page).</p>
  
  <p>This is my code for the navigation bar:</p>
  
  <pre><code>&lt;nav class="top-bar hide-for-small"&gt;
      &lt;ul class="title-area"&gt;
          &lt;!-- Title Area --&gt;
          &lt;li class="name"&gt;
              &lt;h1&gt;&lt;a href="#"&gt;Windweller's Blog&lt;/a&gt;&lt;/h1&gt;
          &lt;/li&gt;
      &lt;!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --&gt;
      &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;Menu&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;!-- Right Nav Section --&gt;
      &lt;section class="top-bar-section"&gt;
          &lt;ul class="right"&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li class="active"&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;Project&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider hide-for-small"&gt;&lt;/li&gt;
              &lt;li class="has-form"&gt;&lt;a class="button active" href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I'm not sure this is resulted from my markup error or this is the default setting of Foundation 4. If this is the default setting (no color change in top nav bar), how should I properly add those effects by myself? (Overriding the CSS or using jQuery to apply classes?)</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I wrote this in my custom.css file and I made the top bar color change happen </p>
  
  <pre><code>  .top-bar-section li a:hover:not(.button) {
      background: #222222;
    }
  </code></pre>
  
  <p>I found this line of code in the original Foundation.css file, but there is no ":hover" on it...yet still, my button is not changing color.</p>
  
  <p>I tried to add this as I found it again in original Foundation.css file, but I just couldn't get it to 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>