Menu Item hover state when not hovering [jsfiddle

2019-09-13 04:17发布

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;
}

1条回答
小情绪 Triste *
2楼-- · 2019-09-13 04:54

Change:

#nav a:hover { ... }

To:

#nav li:hover a { ... }

Updated JSFiddle.

查看更多
登录 后发表回答