Grow your CSS skills. Land your dream job.

Keeping Parent Item Active in Drop Down Nav – CSS/WordPress

  • # July 18, 2012 at 10:58 pm

    I would like to keep the parent element of the drop down menu active when scrolling over the drop down menu. I would also like to keep it active (with color) if it or any of it’s children pages are the current page. One tricky part is each parent item has a different active color.

    I know it’s possible, I just can’t seem to figure out where to put it into the code. I set it up on CodePen so you could see what I have now.

    http://codepen.io/anon/pen/qEdwf

    Any help is greatly appreciated. : )

    First post of many to come. Been a fan of this site for awhile but never realized it had a forum until recently.

    # July 18, 2012 at 11:24 pm

    Rather than placing the hover pseudo-class on the anchor, place it on the list item.

    Here is the updated CSS:

    #main-nav {
    width: 500px;
    height: 120px;
    z-index: 99;
    float: right;
    margin: 0px 0 0 0;
    }

    #main-nav ul { margin:0; padding:0; list-style:none; height: 20px; margin:0; }
    #main-nav ul li {
    display: inline;
    float:left;
    position:relative;
    }
    #main-nav ul li a {
    color: white;
    font: normal 16px "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    padding: 49px 30px 50px 9px;
    display: block;
    text-decoration: none;
    outline: none;
    background: #686765;
    text-transform:lowercase;
    letter-spacing:-1px;
    border-left: 1px solid #bfbfbf;
    -webkit-transition:All .5s ease;
    -moz-transition:All .5s ease;
    -o-transition:All .5s ease;
    width: 50px;
    }

    #main-nav ul li.page-item-16 a {
    border-right: 1px solid #bfbfbf;
    }

    #main-nav ul li.page-item-14:hover a { /*About Hover*/
    background: #8cbc46;
    }

    #main-nav ul li.page-item-14 ul.children li a {
    background: #a9d963;
    }

    #main-nav ul li.page-item-14 ul.children li a:hover {
    background: #8cbc46;
    }

    #main-nav ul li.page-item-11:hover a { /*Results Hover*/
    background: #2ca7e1;
    }

    #main-nav ul li.page-item-11 ul.children li a {
    background: #55c3ff;
    }

    #main-nav ul li.page-item-11 ul.children li a:hover {
    background: #2ca7e1
    ;
    }

    #main-nav ul li.page-item-16:hover a { /*Contact Hover*/
    background: #d8592f;
    }

    #main-nav ul li.page-item-9:hover a { /*Services Hover*/
    background: #d72f81;
    }

    #main-nav ul li.page-item-9 ul.children li a {
    background: #f35099;
    }

    #main-nav ul li.page-item-9 ul.children li a:hover {
    background: #d72f81;
    }

    #main-nav ul li.page-item-6:hover a { /*Branding Hover*/
    background: #9663ad;
    }

    #main-nav ul li a:hover, #main-nav ul li.current_page_item ul.children li a:hover, #main-nav ul li ul.children li a:hover, #main-nav ul li.current_page_parent a:hover, #main-nav ul li.current_page_parent ul.children li a:hover {
    color: white;
    }

    #main-nav ul li.current_page_item a, #main-nav ul li.current_page_parent a, #main-nav ul li.current_page_ancestor a, #main-nav ul li.current_page_parent ul.children li.current_page_item a {
    color: white;
    }

    #main-nav ul li.current_page_item ul.children li a, #main-nav ul li.current_page_parent ul li.current_page_item a, #main-nav ul li.current_page_parent ul.children li a {
    color: #FFF;
    }


    #main-nav ul ul {
    position:absolute;
    left:-999em;
    top:120px;
    width:193px;
    padding-bottom: 10px;
    height: auto;
    display: block;
    margin:0 0 0 -40px;
    z-index: 100;
    }
    #main-nav li:hover ul,#main-nav li.sfhover ul {
    left:auto;
    }
    #main-nav ul ul li {
    letter-spacing:0px;
    color:#444444;
    z-index:20;
    margin:0;
    }
    #main-nav ul ul li a {
    width:120px;
    display: block;
    color:white;
    text-decoration:none;
    font: normal 13px "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    text-align: left;
    margin: 0;
    padding: 4px 5px;
    font-weight: bold;
    text-transform:capitalize;
    background: #35342f;
    }


    #main-nav ul ul ul li a { display: none; }
    # July 18, 2012 at 11:42 pm

    Ahhh. Thank you Josh!

    You just cured my headache.

    # July 18, 2012 at 11:46 pm

    No worries!

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

You must be logged in to reply to this topic.

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