导航下拉菜单时保持悬停样式

Hover style remain while navigating drop down menu(导航下拉菜单时保持悬停样式)

问题描述

当用户使用下拉菜单时，我找不到使悬停样式保持不变的方法.一旦用户向下导航列表，悬停样式就会消失.为了更容易解释这个问题，请转到这个小提琴:http://jsfiddle.net/maFb3/

将光标悬停在MORE按钮上，注意文字颜色的变化.现在，导航下拉菜单，一旦您离开 more 框，样式就会恢复正常.问题是，当用户浏览该下拉菜单时，如何使悬停样式保持不变?我希望保留白色文本颜色.

这是我使用的悬停样式:

ul#mega a:hover { color: #FFFFFF;文字阴影: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="">测试菜单1</a></li><li class="mfilm"><a style="border-bottom:9px solid #ea2e49" href="">测试菜单1</a></li><li class="mtv"><a style="border-bottom:9px solid #2589cf" href="">测试菜单2</a></li></ul><ul id="mega"><li style="背景:无；"class="dif mmmore"><a style="font-style:italic;border-bottom:9px solid #4b5571" href="#">更多...</a>
<提克曼><ul><li class="mgames"><a style="border-bottom:9px solid #e34328" href="">游戏</a></li><li class="mliterature"><a style="border-bottom:9px solid #2c8f83" href="">文学</a></li><li class="marts"><a style="border-bottom:9px solid #cc226a" href="">艺术</a></li><li style="背景:无；"class="mcontact"><a style="border-bottom:9px solid #9395aa" href="">联系人</a></li></ul></ticman><h2>类</h2><p><a href="#">Times</a><a href="#">定时</a><a href="#">地图</a></p><p><a href="#">姓名</a><a href="#">学习</a><a href="#">方向</a></p><p><a href="#">健康</a><a href="#">舞蹈</a><a href="#">生物学</a></p><h2>教师</h2><p><a href="#">比利</a><a href="#">玛德琳</a><a href="#">劳伦</a><a href="#">史蒂夫</a></p><p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">玛德琳</a></p><p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Lorence R</a></p><h2>位置</h2><p><a href="#">卡尔斯巴德</a><a href="#">海滨</a><a href="#">埃尔卡洪</a></p><p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">恩西尼塔斯</a></p><p><a href="#">圣地亚哥</a><a href="#">洛杉矶</a><a href="#">卡迪夫</a></p></div></li></ul></div>

这是 CSS 的一部分:

/* ---------- Mega Drop Down --------- */ul#mega li { padding-right: 0px;背景:url(images/secondary-menu-bg.png)repeat-y右上角；}#超级{列表样式:无；字体粗细:粗体；高度:2em；}#百万李{填充:23px 0px；背景:#999;边框:0px 实心#000;向左飘浮;文本对齐:居中；位置:相对；}#mega li:悬停{背景:#eee;边框底部:0；/* 边框底部:0；和 padding-bottom:1px;保持<li>和 <div>连接的 */z-索引:1；/* 相邻 li 上方的阴影 *