导航下拉菜单时保持悬停样式 [英] 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 上方的阴影 */}#mega a { 字体大小:16px;颜色:#48423f；文字装饰:无；文本转换:大写；字体粗细:粗体；填充:22 像素 16 像素；}ul#mega a:hover { 颜色: #FFFFFF;文字阴影:1px 1px 0 #404747;}/* ----------- 隐藏/显示 div ---------- */#mega div {-moz-border-bottom-colors:无；-moz-border-image:无；-moz-border-left-colors:无；-moz-border-right-colors:无；-moz-border-top-colors:无；背景:无重复滚动 0 0 #FFFFFF;边框颜色:-moz-use-text-color #48423F #48423F;右边框:1px 实心 #48423F;边框样式:无实体实体；边框宽度:0 1px 1px；字体粗细:正常；左:-999em；边距顶部:1px；位置:绝对；文本对齐:左；宽度:496px；}/* --------- 在 Div 样式内 --------- */#mega li:hover div {左:-1px；顶部:自动；}#mega li.dif:悬停 div {左:-407px；顶部:72px；}#mega div h2 {背景:无重复滚动 0 0 #999999;明确:两者；向左飘浮;字体大小:1em；边距:10px 0 5px；填充:0 10px；位置:相对；宽度:300px；}#mega div ticman {明确:两者；向左飘浮;位置:相对；左边距:1px；边距右:1px；宽度:495px；高度:74px；背景图片:网址(图片/morebgwide.png)；背景尺寸:495px 74px；背景重复:不重复；}#mega div p {向左飘浮;左边距:10px；位置:相对；宽度:106px；}#mega div p a {清除:左；向左飘浮;行高:1.4；文字装饰:下划线；宽度:100%；}#mega div a:hover, #mega div a:focus, #mega div a:active {文字装饰:无；}ul#secondary-menu li { background: url(images/secondary-menu-bg.png) repeat-y top right;}ul#secondary-menu a { font-size: 16px;颜色:#48423f；文字装饰:无；文本转换:大写；字体粗细:粗体；填充:22px 16px；}ul#secondary-menu a:hover { 颜色: #ffffff;文字阴影:1px 1px 0 #404747;}#second-menu ul.nav li:hover a {color: #ffffff;文字阴影:1px 1px 0 #404747;}ul#secondary-menu >li.current_page_item >一个{颜色:#919e9e！重要；}ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important;填充:7px 0 10px；背景:#fff 网址(图像/内容-bg.png)；顶部:55px！重要；-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);盒子阴影:3px 3px 7px 1px rgba(0, 0, 0, 0.1);-moz-边界半径:10px；-webkit-border-radius:10px；边框半径:10px；左上角半径:0px；-moz-border-radius-topleft:0px；边框右上角半径:0px；-webkit-border-top-left-radius: 0px;-moz-border-radius-topright:0px；-webkit-border-top-right-radius: 0px;z-index:9999px；显示:无；}ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important;填充:8px 0 8px 30px ！重要；宽度:150px；向左飘浮;}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;左:180px！重要；-moz-边界半径:8px；-webkit-border-radius:8px；边框半径:8px；}ul#secondary-menu ul li.even-item { 背景:无；}.mfilm:悬停{背景:#ea2e49！重要；}.mtv:悬停{背景:#2589cf！重要；}.mwebvideos:悬停{背景:#5c58ac !important;}.manation:悬停{背景:#43cf61 !important;}.mmore:悬停{背景:#4b5571 ！重要；}.文学:悬停{背景:#2c8f83 !important;}.mgames:悬停{背景:#e34328 ！重要；}.marts:悬停{背景:#cc226a！重要；}.mcontact:悬停{背景:#9395aa ！重要；}

虽然我建议访问 fiddle 以获得视觉效果，但我尝试从中剥离我的大部分网站代码，这样它就会显得凌乱:http://jsfiddle.net/maFb3/

解决方案

将此添加到您的 CSS:

#mega li.mmore:hover >一个{颜色:#fff;text-shadow:none;/* 它在 FF 中添加了一个文本阴影*/}

演示

I cannot find a way to make the hover style to remain when the user use the drop down. Once the user navigate down the list, the hover style disappears. To explain this issue easier, go to this fiddle: http://jsfiddle.net/maFb3/

Hover the cursor over the MORE button, pay notice to how the text color changes. Now, navigate the drop down, as soon as you leave the more box, the style goes back to normal. The question is, how do I make the hover style remain when the user navigates through that drop down? I want the white text color to remain.

This is the hover style I use:

ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; }

This is part of the HTML code:

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

Here is part of the 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;
}

Although I would suggest visiting the fiddle for a visual look, I tried to strip most of my sites code from it so it will appear messy: http://jsfiddle.net/maFb3/

解决方案

Add this to your CSS:

#mega li.mmore:hover > a
{
    color:#fff;
    text-shadow:none;/* it added a text-shadow in FF*/
}

DEMO

这篇关于导航下拉菜单时保持悬停样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！