Parent Navigation different color while in submenu - css

Question

Here is the jsFiddle : http://jsfiddle.net/wQs5a/
What I am trying to do is make is so when you highlight over the parent item,
It is the color gray (#aaaaaa). Then when you go into the submenu I want the submenu
item to be highlighted the same gray (which currently works fine).
But now I want the parent item to return to green (#60a74a) while being
over the submenu item.
Any help would be great. From my research it seems I might need some Javascript
Thanks for any help.
The CSS:
.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;
}

Answer 1

Welcome to SO! You can add an extra div to the .sub element (select_bg) and position it with margin-top, z-index etc.:
http://jsfiddle.net/wQs5a/1/
Maybe not the best solution because you have to work with exact dimensions but you don't need to use JS. :)