Grow your CSS skills. Land your dream job.

Sub-Menu Highlight Color Difficulties

  • # January 24, 2013 at 6:37 pm

    ‘Allo again everyone. I am having some difficulties with my menu once more. I decided to make each menu item a different color. I also want a rollover state that shows the button becoming a brighter hue. Here is my CodePen. Basically, I was able to give a different color to each menu item. The rollover also works for most of them. The ones I am having difficulty with are the sub-menu items “Feel Good Candy” and “Gloom” under “Literature.” I would like for those to highlight as a lighter yellow just like “Literature” does. I thought I could just do this:

    .feelgoodcandy a:hover {
    color: #E3C605;
    }

    But I guess I need to do something else. What ever it is, I have no clue where to begin. Hopefully, you guys can help me out. Thank you in advance!

    # January 24, 2013 at 7:13 pm

    You’re probably not being specific enough with your selector. Adding #menubar in front of the selector should solve your problem.

    #menubar .feelgoodcandy a:hover {
    color: #E3C605
    }

    # January 24, 2013 at 7:13 pm

    #menu-bar ul li ul a {
    text-decoration: none;
    color: #B09904;
    height: auto;
    padding: 0;
    display: block;
    }

    Do you need that color? If not, remove that color and then add your code.

    # January 24, 2013 at 7:19 pm

    Actually, @theacefes, I just removed that line for color and it seems to work. I did not have to put in any secondary code. Awesome. Thank you muchly!

    # January 24, 2013 at 7:48 pm

    Nifty! :)

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

You must be logged in to reply to this topic.

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