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.
An example can be viewed at: http://jsfiddle.net/Gasdj/
The 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>
The 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:
To:
Updated JSFiddle.