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

[Jeremy Englert]

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.

[joshuanhibbert]

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; }		

[joshuanhibbert]

No worries!

[puni3k]

hello,

I have the same problem but don’t know where exactly I should change code. Ma parent in not clickable: kitesurfing.pl – KURSY I LEKCJE. When i click it in link just appears #.

Thank you for any help

[Author]

Posts