0

ここに 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;
}
4

1 に答える 1