title: How to customize dropdown background-color while hover zurb-foundation 5
body: <p>How can I customize background-color while hovering <code>&lt;a href="#"&gt;Find Me&lt;/a&gt;</code>.<br>
  I want to change the background-color while I'm hovering.<br>
  this's the picture before I do hovering.</p>
  
  <p><img src="https://i.stack.imgur.com/pi45W.png" alt="enter image description here"></p>
  
  <p>and this's the picture after I do hovering</p>
  
  <p><img src="https://i.stack.imgur.com/SdUPj.png" alt="enter image description here"></p>
  
  <p>I want to customize background-color at " Find Me "<br>
  what should I add to customize background color.</p>
  
  <p>and this's my code</p>
  
  <pre><code>&lt;nav style="width: 1000px; margin: auto;" class="top-bar" data-topbar role="navigation"&gt;
      &lt;ul style="margin-right: 80px;" class="title-area"&gt;
          &lt;li class="name"&gt;
              &lt;h1&gt;&lt;a href="#"&gt;My Site&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;section class="top-bar-section"&gt;
          &lt;!-- Left Nav Section --&gt;
          &lt;ul class="left"&gt;
              &lt;li class="has-dropdown"&gt;
                  &lt;a href="#"&gt;Find Me&lt;/a&gt;
                  &lt;ul class="dropdown"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Steamcommunity&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
  &lt;/nav&gt;
  </code></pre>