Home › Forums › CSS › Keeping Parent Item Active in Drop Down Nav – CSS/WordPress › Re: Keeping Parent Item Active in Drop Down Nav – CSS/WordPress
July 18, 2012 at 11:24 pm
#106383
joshuanhibbertMember
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; }