how to remove and bring another hover effect in drop down in CSS?

[sayedtaqui]

HI , I m creating a simple drop down, and having a little problem.
http://ammasbiryani.com/college/
I have put a background image in the the first ‘li’ tag and I want, that when the drop down opens the same background image should not be applied to li>ul>li . And also the same color should not be applied to the li>ul>li>a links. I tried this but did not work.

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

#mmmm li:hover li>ul>li{
background:none;
}

And I was also trying to have a border-right to the the li>ul items as you can see, but that’s static because I gave it a height of 150px(which would be a problem if the client adds more li>ul>li items or remove them). is there anyway to give it a border depending on the maximum number of li>ul>li items in the li>ul ?

Thanks

[Paulie_D]

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

You are calling/selecting the top level [li] twice which will confuse things.

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

Please note that I am not saying this will correct things but it’s start.

This is quite heavy depth of selectors. You might want to apply a class to your submenus and use that instead for clarity.

[Paulie_D]

This

#mmmm li:hover {
background: url(images/nav-bg-active.jpg);
}

is applying so you will have to change it.

If you do this

#mmmm > ul > li:hover {
background: url(images/nav-bg-active.jpg);
}

The bg image will only apply to the top level menu items.

[sayedtaqui]

Thanks I have applied the code you gave but now the hover background is not coming.
The li>ul>li are getting the #000 color on hover however I wanted to them to change color individually.

[Paulie_D]

>I wanted to them to change color individually.

I’m not sure what that means.

Do you want each li to have a different background color or you want each link color to be different?

[cfGoose]

In order to have each individual link change color individually, assuming I understand you correctly, try

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

[Author]

Posts