Check out the jsFiddle link here : http://jsfiddle.net/wQs5a/
I'm working on changing the color of the parent item to gray (#aaaaaa) when it's highlighted, and similarly highlighting the submenu item in the same gray color (which is currently working fine).
However, I want the parent item to return to green (#60a74a) when hovering over the submenu item.
Any assistance would be much appreciated. Based on my research, it seems like I might need some Javascript.
Thank you for your help!
CSS Code:
.leftNav {
height:58px;
background: #1c1c1c;
position:relative;
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
width:88px;
z-index:500;
}
.leftNav .table {
/*display:table;*/
margin:0 auto;
}
.leftNav .select,
.leftNav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.leftNav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.leftNav .select a {
display:block;
height:58px;
float:left;
background: #1c1c1c;
padding:0 20px 0 20px;
text-decoration:none;
line-height:58px;
white-space:nowrap;
color:white;
}
.leftNav .select a:hover,
.leftNav .select li:hover a {
background: #aaaaaa;
padding:0 0 0 0px;
cursor:pointer;
color:white;
}
.leftNav .select a:hover strong,
.leftNav .select li:hover a strong {
display:block;
float:left;
padding:0 20px 0 20px;
background:#aaaaaa;
cursor:pointer;
}
.leftNav .select_sub {
display:none;
}
/* IE6 only */
.leftNav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.leftNav .sub {
margin:0 auto;
padding:0;
list-style:none;
font-weight:bold;
}
.leftNav .sub_active .current_sub a,
.leftNav .sub_active a:hover {
background:transparent;
color:white;
}
.leftNav .select :hover .select_sub,
.leftNav .current .show {
display:block;
position:absolute;
top:58px;
background:#60a74a;
padding:0;
z-index:100;
left:-100px;/*this is the alignment for the submenu*/
float:left;
}
.leftNav .current .show {
z-index:10;
}
.leftNav .select :hover .sub li a,
.leftNav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 20px 0 20px;
margin:0;
white-space:nowrap;
border:0;
color:white;
}
.leftNav .current .sub li.sub_show a {
color:white;
cursor:default;
background:#60a74a;
}
.leftNav .select :hover .sub li a:hover,
.leftNav .current .sub li a:hover {
visibility:visible;
color:white;
background:#aaaaaa;
}
.leftNav .select :hover .select_sub,
.leftNav .current .show {
display:block;
position:absolute;
top:58px;
background:#60a74a;
padding:0;
z-index:100;
left:0;/*this is the alignment for the submenu*/
float:left;
}