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

0

欢迎来到 SO!div您可以在.sub元素 ( select_bg)中添加额外内容,并将其定位为margin-topz-index

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

也许不是最好的解决方案,因为您必须使用精确的尺寸,但您不需要使用 JS。:)

于 2013-07-17T16:47:28.457 回答