父導航不同的顏色，而在子菜單中

Question

這裏是的jsfiddle：http://jsfiddle.net/wQs5a/

我所試圖做的就是如此，當你在彰顯父項， 它是灰色（#AAAAAA）。然後，當你進入子菜單時，我想子項目 項目突出顯示相同的灰色（目前工作正常）。

但現在我希望父項返回到綠色（＃60a74a），而在子菜單項上是 。

任何幫助將是偉大的。從我的研究看來，我可能需要一些Javascript

感謝您的任何幫助。

的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

歡迎SO！你可以用margin-top添加一個額外的div到.sub元素（select_bg），並將其定位，z-index等：

http://jsfiddle.net/wQs5a/1/

也許不是最好的解決方案，因爲你有精確尺寸的工作，但你不需要使用JS。 :)