Menu icon Foundation
Top-bar dropdown parent color

I have a top-bar with a dropdown menu with some child items. I changed the colors with CSS.

One thing I can't seem to find is the color of a parent when you hover over the childeren. I attached an image to make it clear. I am trying to change the black/grey color.

Hope someone has an idea, cause it does not seem to show up in Firebug or any web inspector.

Dropdown

topbarparentdropdownhover

I have a top-bar with a dropdown menu with some child items. I changed the colors with CSS.

One thing I can't seem to find is the color of a parent when you hover over the childeren. I attached an image to make it clear. I am trying to change the black/grey color.

Hope someone has an idea, cause it does not seem to show up in Firebug or any web inspector.

Dropdown
Lynda Spangler over 5 years ago

See if this works:

.top-bar-section li:not(.has-form) a:hover:not(.button) {
    background:#9BBE2D;
}

Christian Solorzano over 5 years ago

@Lynda Spangler, that didn't work.

Tony Stark over 5 years ago

Locate below class and chage Red instead your color code

.top-bar-section ul li:hover:not(.has-form) > a {
    background: none repeat scroll 0 0 RED;
    color: #FFFFFF;
}
.top-bar-section li.hover > a:not(.button) {
    background: none repeat scroll 0 0 RED;
    color: #FFFFFF;
}
.top-bar-section li:not(.has-form) a:hover:not(.button) {
    background: none repeat scroll 0 0 RED;
}
.top-bar-section .dropdown li:hover:not(.has-form) > a:not(.button) {
    background: none repeat scroll 0 0 RED;
    color: #FFFFFF;
}
.no-js .top-bar-section ul li:hover > a {
    background: none repeat scroll 0 0 RED;
    color: #FFFFFF;
}

This change may be cause problem, so if you have SASS version then open _top-bar.scss file
and locate this class

$topbar-link-bg-hover: RED !default

change color, it will easy to do...

Xaheen almost 5 years ago

did any1 got the solution about that ?????
am having the same issue ...........
how to change parent li color on child hover ? i dont want black background...

Phong Luu almost 5 years ago

You should be able to change $topbar-dropdown-link-bg to affect the color of the elements inside a dropdown. We've made some changes otherwise that should correct this when you don't have anchors in the dropdown.

linyu almost 5 years ago

I got this problem aslo, i think that is the js affection, if we want to just change the css that is not work for it,

Do we have to import the SASS to solve this issue ?

michael barry almost 5 years ago

If the above didn't work, try this...

.top-bar-section .dropdown li.title h5 a {background:green;color:#fff}
.top-bar-section .dropdown li.title h5 a:hover {background:red;color:#fff}
.top-bar-section .dropdown li.parent-link a,
.top-bar-section .dropdown li.parent-link a:hover {background:purple;color:#fff}
@media only screen and (min-width: 40.063em) {
.top-bar-section li:not(.has-form) a:not(.button):hover {background:yellow;color:#333;text-decoration:underline}
.top-bar-section ul li:hover:not(.has-form) > a {background:orange;color:#fff}
}

Jonas Allen over 4 years ago

The fix is posted in another post, "http://foundation.zurb.com/forum/posts/7320-styling-top-bar-dropdown".

I found it on line 1919 on foundation.css,

.top-bar-section ul li:hover:not(.has-form) > a {
  background: #272727;
  color: white;
}