Get help. Give help. A Web Design and Development Community.

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

  • # March 20, 2013 at 7:11 am

    HI , I m creating a simple drop down, and having a little problem.
    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{

    #mmmm li:hover li>ul>li{

    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 ?


    # March 20, 2013 at 7:31 am

    #mmmm li:hover li>ul>li>a{

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

    #mmmm li:hover > ul > li > a{

    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.

    # March 20, 2013 at 7:42 am


    #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.

    # March 20, 2013 at 8:09 am

    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.

    # March 20, 2013 at 8:26 am

    >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?

    # March 20, 2013 at 4:46 pm

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

    #mmmm li > ul > li > a:hover {

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We have a pretty good* newsletter.