Menu icon Foundation
Styling the top bar

Screenshot  2

<li class="has-dropdown">
            <a href="#">The Ceremony</a>
            <ul class="dropdown">
              <li><a href="locations.html">Locations</a></li>
              <li><a href="#">Design &amp; Décor</a></li>
              <li><a href="#">Cakes &amp; Sweets</a></li>
              <li><a href="#">Entertainment</a></li>
              <li><a href="#">Party rentals</a></li>
              <li><a href="#">Catering</a></li>
              <li><a href="#">Photography</a></li>
              <li><a href="#">Invitations</a></li>
            </ul>
          </li>
            

         

Screenshot  2

<li class="has-dropdown">
            <a href="#">The Ceremony</a>
            <ul class="dropdown">
              <li><a href="locations.html">Locations</a></li>
              <li><a href="#">Design &amp; Décor</a></li>
              <li><a href="#">Cakes &amp; Sweets</a></li>
              <li><a href="#">Entertainment</a></li>
              <li><a href="#">Party rentals</a></li>
              <li><a href="#">Catering</a></li>
              <li><a href="#">Photography</a></li>
              <li><a href="#">Invitations</a></li>
            </ul>
          </li>
            

         
renato colaço over 5 years ago

I now this is bit old question but I have the same issue too. Do you found any solution?

[update]

I have found a solution. Just overrid this rule bellow and set the behavior you want.

.top-bar-section ul li:hover > a {
        background: none;
        color: #2B5B72;
    }

Gareth Edwards about 5 years ago

I've tried the above solution but I still get the same problem? Any ideas, guys?

Sherry Bradford over 2 years ago

I ended up having to create a totally separate css file for the top-bar. My pages are buried deep behind several layers of corporate css so we always have issues with downstream impacts on foundation css. In some cases, I had to go the hellish route of putting the style right into the page. I definitely do not recommend that - but in some cases there simply was no other solution. Fortunately our total number of pages with the top-bar nav is low so it isn't as horrible as it would be in a major web environment.