Question

我想要做的是当你突出显示父项时，make是这样的，它是灰色（#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！您可以向div元素（.sub）添加额外的select_bg，并将其与margin-top，z-index等对象放置：

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

也许不是最好的解决方案，因为你必须使用精确的尺寸，但你不需要使用JS。：）

父级在子菜单中导航不同的颜色

1 个答案: