Grow your CSS skills. Land your dream job.

Parent Menu and Sub Menu Background Color

  • # February 13, 2013 at 5:32 am

    Hi :)
    Do you know how to do this please?

    I want the Parent of the active menu black.
    I’ve used CSS

    #sticky_navigation ul li.active a { background:#333; }

    [Your text to link here...](http://virtuemarttemplate.com/demo/VM01/index.php/layout “Example Page”)

    but this also changes the color of the

    .dropdown-menu

    Which I want keep “background:#FFF” white.

    Do you know how I can do this please?

    Many Thanks and Best Regards
    Charles

    # February 13, 2013 at 5:38 am

    .nav > li a { background: #333; }

    # February 13, 2013 at 5:43 am

    I THINK you could do it with

    .dropdown-menu li a {
    background:white;
    }

    # February 13, 2013 at 5:45 am

    Yup, it is another solution as well.

    Either you apply the background to the main list only and not to the dropdown menues. Or you apply it to every list items and fix it on dropdowns.

    # February 13, 2013 at 6:14 am

    #sticky_navigation ul li.active > a { background:#333; }

    So it only applies only to the a element that is a direct child of the active list item.

    # February 13, 2013 at 7:05 am

    This selector is getting heavy. You may reduce it: #sticky_navigation .active > a.

    # February 13, 2013 at 10:06 am

    Thank you very much for your help Hugo

    # February 14, 2013 at 9:08 am

    Hi Hugo
    Would you please help?

    I’ve changed the link color

    ul.dropdown-menu li.active a { #DAA520 !important; background#fff; }

    But the background on the active link is still black.

    [http://virtuemarttemplate.com/demo/VM01/index.php/layout/2-column-left]“Page Link”)

    Many Thanks for your help and time

    Best Regards
    Charles

    # February 14, 2013 at 9:54 am

    It’s not just a typo?
    background#fff; should be background:#fff;

    Also since you have been using !imporant it might be overridden by the
    ‘#sticky_navigation .active > a background: #333 !important;’ property.

    # February 15, 2013 at 8:04 am

    The problem is when I remove the !important
    Then I lose the background color on both the parent
    and the submenu

    Many Thanks for your help

    # February 15, 2013 at 8:28 am

    It’s ok I’ve fixed it Thanks!

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

You must be logged in to reply to this topic.

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