Forums

JeremyEnglert

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

JeremyEnglert

Ahhh. Thank you Josh!

You just cured my headache.

joshuanhibbert

No worries!

treehouse : what would you like to learn today?

Forums

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