菜單項懸停狀態時不懸停[jsfiddle鏈接包括]

Question

我有一個導航，當我懸停在主菜單項'市場'下拉菜單出現更改'市場'文本到不同的顏色。現在，當我轉到其中一個下拉菜單時，菜單項會變回正常狀態。我需要它保持與懸停狀態相同，以便可以看到它。

一個例子可以在觀看：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; 
} 

Answer 1

變化：

#nav a:hover { ... } 

要：

#nav li:hover a { ... } 

Updated JSFiddle。