CODEWITHSUNDEEP
htmlcss
user3111896
user3111896

Reputation: 39

css dropdown menu override child li's properties

First of all i would like to add that its been a while, about 3 years, since i've developed a dropdown menu in CSS. I have this drop down menu, but i have the following issue. apparently i cannot override properties of li/a elements of my submenu.

I would like to make the font color of submenu's li's a elements same as color of menu's ul's li's a elements, which is light grey ( rgb(206,206,204) )

Could somebody please take a look and point me at what i am doing wrong? Here's a link to a source code archive with html, css and background images: http://www.filedropper.com/001_17

Upvotes: 0

Views: 708

Answers (1)

Jacob G
Jacob G

Reputation: 14172

Your problem is in this rule:

div ul.menu li:hover a{

    background-color: rgb(73,144,241);

    background-color: rgba(73,144,241,0.05);

    color: rgb(255,255,255);

}

With that rule all <a>'s in that <li> turn white. What you need to do is have only the direct children turn white:

div ul.menu li:hover > a{

        background-color: rgb(73,144,241);

        background-color: rgba(73,144,241,0.05);

        color: rgb(255,255,255);

}

JSFiddle Demo

Upvotes: 2

Related Questions