这是 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;
}