Grow your CSS skills. Land your dream job.

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

    # March 20, 2013 at 7:31 am

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

    # March 20, 2013 at 7:42 am

    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.

    # 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 {
    color:#000;
    }

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".