菜单项不悬停时悬停状态[包括jsfiddle链接] [英] Menu Item hover state when not hovering [jsfiddle link included]

问题描述

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

I have a navigation, and when I hover on the main menu item 'Markets' a dropdown appears changing the 'Markets' text to a different color. Now when I go to one of the dropdowns the menu item changes back to its regular state. I need it to stay the same as the hover state so it can be seen.

一个例子可以在 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;
}

推荐答案

Change:

#nav a:hover { ... }

To：

#nav li:hover a { ... }

更新JSFiddle 。

这篇关于菜单项不悬停时悬停状态[包括jsfiddle链接]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！