CSS Drop Down - Sub Menu Color

CSS Drop Down – Sub Menu Color

From the above code for changing the color of submenus, you have not targeted the child elements of the main menus. For that you need to target them and add new rules to specifically target that element and change the color. Here is the solution.

On hover of the items with submenus, the color change for instance here green color on display of the submenus.

nav ul li:hover ul li a{color:green;}

On hover of the submenus, change of color from green to yellow for instance.

nav ul li:hover ul li a:hover{color:yellow;}

To elaborate this,

The HTML:

   <nav>
    <ul>
        <li><a class="selected" href="index.html">Home</a></li>
        <li><a href="clothing.html">Clothing</a></li>
        <li><a href="gear.html">Gear</a></li>
        <li><a href="brand.html">Brand</a>
            <ul>
                <li><a href="#">XXXXXX</a></li>
                <li><a href="#">XXXXXX</a></li>
            </ul>
        </li>
        <li><a href="fighter.html">Fighters</a>
            <ul>
                <li><a href="#">XXXXXX</a></li>
                <li><a href="#">XXXXXX</a></li>
            </ul>
        </li>
        <li><a href="account.html">My Account</a></li>
    </ul>
</nav>

The CSS:

    nav {
    position:relative;
    float:right;
    font-size:14px;
    margin-top:35px;
    font-weight:bold;
    padding-right:178px;
    z-index:4;
}
nav ul ul {
    display:none; /* hide sub menus */
}
nav ul li:hover > ul {
    display:block; /* show sub menus on hover */
}
nav ul {
    float:right;
    font-size:14px;
    margin-top:-3px;
    text-transform:uppercase;
    list-style:none;
    position:relative; /* position sub menu according to nav */
    display:inline-table; /* condense with of sub menu to fit */
}
nav ul:after {
    content:"";
    clear:both;
    display:block; /* clear floats on other list items */
}
nav ul li {
    float:left;
}
nav ul li:hover a {
    color:#ee1f3b;
    text-decoration:none;
    -webkit-transition-property:color; 
    -webkit-transition-duration:0.2s, 0.2s; 
    -webkit-transition-timing-function:linear, ease-in;
    -moz-transition-property:color; 
    -moz-transition-duration:0.2s, 0.2s; 
    -moz-transition-timing-function:linear, ease-in;
}
nav ul li a {
    padding:4px 11px;
    text-decoration:none;
    color:#000000;
    display:block;
    text-decoration:none;
}
nav ul ul {
    background:#cacaca;
    position:absolute;
    top:25px; /* sub position */
}
nav ul ul li {
    float:none; 
    border-bottom:1px solid rgba(0, 0, 0, 0.2);
    position:relative;
}
nav ul ul li:last-child {
    border-bottom:1px solid rgba(0, 0, 0, 0.2);
}
.selected {
    color:#ee1f3b;
}   
nav ul ul li a:hover {
    color:#000000;
}

nav ul li:hover ul li a{color:green;}
nav ul li:hover ul li a:hover{color:yellow;}

Hope this helps.

CSS drop down menu with different color

You have to specify in which elements want to apply style changes.

This one selects first submenu:

ul > li:first-child > ul > li a:hover{
    color: #87a0b4;
    background: yellow;
}

This one selects the second submenu:

ul > li:nth-child(2) > ul > li a:hover{
    color: #87a0b4;
    background: blue;
}

This one changes Link1 hover color:

ul > li:first-child a:hover{
    color: #87a0b4;
    background: blue;
}

You can continue and apply any effect you want. Hope it helps :)

fiddle

Change CSS dropdown menu color when any child is hovered

You want to change:

#main-navigation li a:hover {
    color: #FFF;
}

to be:

#main-navigation li:hover > a {
    color: #FFF;
}

JSFiddle here.

Basically, you want the a element's color to change when you are hovered over the list item. That way, when you hover over other submenu items, you're still hovering over the li containing the submenu.

I use the child selector > so that the submenu item links are not affected when you're hovering over the main menu item link.

---

To target the Plans submenu link colors, you should apply the styling to a class to specifically target them. Since you already have a class specifically on Plans (.active), I'll just use that for demonstration purposes.

CSS:

#main-navigation li:hover > a, #main-navigation .active:hover a {
    color: #FFF;
}

JSFiddle here.

I get rid of the child selector when targeting .active so that it makes all child a elements white when hovering over the main link.

Background color of menu item when Dropdown menu is still active

Add this appeal.

li.site-nav--has-dropdown:hover {
     background-color: #B8A899;
}

how to change color of links in dropdown menu in navbar toggle

Try this if this works.

ul.dropdown-menu > li > a {color:black !important;}

CSS Dropdown Menu - Sub Menu Hover Text Color Inheritance

Add

#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{
    color:white;
}

DEMO: http://jsfiddle.net/EB97N/

---

Related Topics