css - How to customize dropdown background-color while hover zurb-foundation 5 -
how can customize background-color while hovering <a href="#">find me</a>
.
want change background-color while i'm hovering.
this's picture before hovering.
and this's picture after hovering
i want customize background-color @ " find me "
should add customize background color.
and this's code
<nav style="width: 1000px; margin: auto;" class="top-bar" data-topbar role="navigation"> <ul style="margin-right: 80px;" class="title-area"> <li class="name"> <h1><a href="#">my site</a></h1> </li> <!-- remove class "menu-icon" rid of menu icon. take out "menu" have icon alone --> <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li> </ul> <section class="top-bar-section"> <!-- left nav section --> <ul class="left"> <li class="has-dropdown"> <a href="#">find me</a> <ul class="dropdown"> <li><a href="#">facebook</a></li> <li><a href="#">steamcommunity</a></li> </ul> </li> </ul> </section> </nav>
i believe css you're looking is: .top-bar-section li:not(.has-form) a:not(.button):hover
working fiddle (make sure screen wide enough see second link).
you can use developer tools inspect element, , modify see pseudo-class states.
i'd recommend learning how modify globals in foundation set can save lot of time rather overwriting foundation standards.
Comments
Post a Comment