Пункт меню hover state when not hovering [jsfiddle link included]

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 { ... } 

To:

#nav li:hover a { ... } 

Updated JSFiddle.