当用户使用下拉菜单时，我找不到使悬停样式保持不变的方法。一旦用户向下导航列表，悬停样式就会消失。为了更容易解释这个问题，去这个小提琴：http: //jsfiddle.net/maFb3/
将光标悬停在“更多”按钮上，注意文本颜色的变化。现在，导航下拉菜单，一旦您离开更多框，样式就会恢复正常。问题是，当用户浏览该下拉菜单时，如何使悬停样式保持不变？我希望保留白色文本颜色。
这是我使用的悬停样式：
ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; }
这是 HTML 代码的一部分：
<div class="clearfix" id="second-menu">
<ul class="nav sf-js-enabled" id="secondary-menu">
<li class="mfilm"><a style="border-bottom:9px solid #ea2e49" href="">Test menu 1</a></li>
<li class="mfilm"><a style="border-bottom:9px solid #ea2e49" href="">Test menu 1</a></li>
<li class="mtv"><a style="border-bottom:9px solid #2589cf" href="">Test menu 2</a></li>
</ul>
<ul id="mega">
<li style="background:none;" class="dif mmore"><a style="font-style:italic;border-bottom:9px solid #4b5571" href="#">More...</a>
<div>
<ticman>
<ul>
<li class="mgames"><a style="border-bottom:9px solid #e34328" href="">Games</a></li>
<li class="mliterature"><a style="border-bottom:9px solid #2c8f83" href="">Literature</a></li>
<li class="marts"><a style="border-bottom:9px solid #cc226a" href="">Arts</a></li>
<li style="background:none;" class="mcontact"><a style="border-bottom:9px solid #9395aa" href="">Contact</a></li>
</ul>
</ticman>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Madeline</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Lorence R</a></p>
<h2>Location</h2>
<p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
<p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
<p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
</div>
</li>
</ul>
</div>
这是CSS的一部分：
/* ---------- Mega Drop Down --------- */
ul#mega li { padding-right: 0px; background: url(images/secondary-menu-bg.png) repeat-y top right; }
#mega {
list-style:none;
font-weight:bold;
height:2em;
}
#mega li {
padding: 23px 0px;
background:#999;
border:0px solid #000;
float:left;
text-align:center;
position:relative;
}
#mega li:hover {
background:#eee;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
z-index:1; /* shadow above adjacent li */
}
#mega a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px;}
ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; }
/* ----------- Hide/Show Div ---------- */
#mega div {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #48423F #48423F;
border-right: 1px solid #48423F;
border-style: none solid solid;
border-width: 0 1px 1px;
font-weight: normal;
left: -999em;
margin-top: 1px;
position: absolute;
text-align: left;
width: 496px;
}
/* --------- Within Div Styles --------- */
#mega li:hover div {
left: -1px;
top: auto;
}
#mega li.dif:hover div {
left: -407px;
top: 72px;
}
#mega div h2 {
background: none repeat scroll 0 0 #999999;
clear: both;
float: left;
font-size: 1em;
margin: 10px 0 5px;
padding: 0 10px;
position: relative;
width: 300px;
}
#mega div ticman {
clear: both;
float: left;
position: relative;
margin-left:1px;
margin-right:1px;
width: 495px;
height: 74px;
background-image: url(images/morebgwide.png);
background-size:495px 74px;
background-repeat:no-repeat;
}
#mega div p {
float: left;
padding-left: 10px;
position: relative;
width: 106px;
}
#mega div p a {
clear: left;
float: left;
line-height: 1.4;
text-decoration: underline;
width: 100%;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration: none;
}
ul#secondary-menu li { background: url(images/secondary-menu-bg.png) repeat-y top right; }
ul#secondary-menu a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px; }
ul#secondary-menu a:hover { color: #ffffff; text-shadow: 1px 1px 0 #404747; }
#second-menu ul.nav li:hover a {color: #ffffff; text-shadow: 1px 1px 0 #404747; }
ul#secondary-menu > li.current_page_item > a { color: #919e9e !important; }
ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important; padding: 7px 0 10px; background: #fff url(images/content-bg.png); top: 55px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important; padding: 8px 0 8px 30px !important; width: 150px; float: left; }
ul#secondary-menu ul li a, #category_mobile_menu a { padding: 0 !important; }
ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { top: -8px !important; left: 180px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#secondary-menu ul li.even-item { background: none; }
.mfilm:hover{
background:#ea2e49 !important;
}
.mtv:hover{
background:#2589cf !important;
}
.mwebvideos:hover{
background:#5c58ac !important;
}
.manimation:hover{
background:#43cf61 !important;
}
.mmore:hover{
background:#4b5571 !important;
}
.mliterature:hover{
background:#2c8f83 !important;
}
.mgames:hover{
background:#e34328 !important;
}
.marts:hover{
background:#cc226a !important;
}
.mcontact:hover{
background:#9395aa !important;
}
虽然我建议访问小提琴以获得视觉效果，但我试图从中剥离我的大部分网站代码，因此它会显得凌乱：http: //jsfiddle.net/maFb3/