CODEWITHSUNDEEP
cssdrop-down-menu
Dhanil
Dhanil

Reputation: 542

Css Dropdown Menu font color

In my drop-down menu the font colour of "li" is white and while "hover" the colour change to black and i have drop-down menu also .When hover the sub menu of my products link, the font colour products(li) changing to white my hover background is also white, here my question, how can I keep the colour of my "li" as black ??

my stylesheet

#menu{width:auto; margin: 0px 0px 0px 0px; background-color: #000; height:32px; float:right; border-radius:0px 0px 10px 10px ;}
#menu ul{list-style-type:none; margin:0px; padding:0px; margin-left:10px;}
#menu ul li{float: left; position: relative; margin-left:0px; height:29px; padding-top:3px;}
#menu ul li:active {color:#000;}
#menu ul li:hover{background-color: #f5f5f5; margin-left:0px; color:#000}
#menu ul li a{color: #fff; padding: 0 16px; line-height:25px; font-size:13px; font-family:arial; display: block; text-decoration:none; margin-left:0px;}
#menu ul li a:hover{background-color: #f5f5f5; margin-left:0px; color:#000;}
#menu ul li ul li{float: none; position: relative; margin-left:0px;}
#menu ul li ul{position: absolute; top:32px; left:0; display: none; background-color: #000; width:150px; margin-left:0px;}
#menu ul li:hover > ul{display: block; margin-left:0px; color:#000;}
#menu ul li ul li a{white-space: nowrap; line-height:25px; margin-left:0px;}
#menu ul li ul li ul{position: absolute; top:0; left:145px; display: none; background-color: #000; width:150px; margin-left:0px;}

my html code

<div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Product</a>
                    <ul>
                        <li><a href="#">Has Submenu</a></li>
                        <li><a href="#">Has Submenu</a></li>
                        <li><a href="#">Has Submenu</a></li>
                        <li><a href="#">Has Submenu</a></li>
                        <li><a href="#">Has Submenu</a></li>
                    </ul>
                </li>
                <li><a href="#">Other Services</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>

Upvotes: 0

Views: 5208

Answers (1)

matewka
matewka

Reputation: 10148

Add the following CSS:

#menu ul li:hover > a {
    color: #000;
}

The problem was the anchor tag. No matter what color would you set for the li, the anchor tag has style color: #fff.

Upvotes: 1

Related Questions