0

我有一个导航，当我将鼠标悬停在主菜单项“市场”上时，会出现一个下拉菜单，将“市场”文本更改为不同的颜色。现在，当我转到其中一个下拉菜单时，菜单项会变回其常规状态。我需要它保持与悬停状态相同，以便可以看到它。

可以在以下位置查看示例：http: //jsfiddle.net/Gasdj/

的HTML：

<ul id="nav" class="drop">
    <li><a href="#" class="static">About Us</a>
    </li>
    <li><a href="#">News</a>
    </li>
    <li><a href="#">Markets</a>
<ul>
        <li>Charlotte, NC</li>
        <li>Rock Hill, SC</li>
        <li>Panama City, FL</li>
        <li class="nobrd">Atlanta, GA</li>
    </ul>
</li>
</li>
<li><a href="#">Developments</a>
</li>
<li><a href="#">Hedge Funds</a>
</li>

CSS：

body {
background: #ccc;
}
#nav {
width: 100%;
float: left;
padding: 0;
list-style: none;
height: 20px;
}
#nav ul {
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
margin-right: 25px;
height: 20px;
display: block;
position: relative;
color: #7a7c41;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: #7a7c41;
}
.static {
cursor: default;
}
 ul#nav {
margin: 0 0 0 0px;
}
ul.drop a {
display:block;
color: #7a7c41;
font-size: 14px;
text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
color: #ecee9c;
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 599;
cursor: default;
background: #fff;
}
ul.drop ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 598;
width: 195px;
background: #fff;
/*border: 1px solid #000;*/
}
ul.drop ul li {
float: none;
border-bottom:1px solid #7a7c41;
width: 175px;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible;
}
.nobrd {
border: none !important;
}
4

1 回答 1

1

改变：

#nav a:hover { ... }

到：

#nav li:hover a { ... }

更新了 JSFiddle。

于 2013-03-14T13:18:42.483 回答