导航下拉菜单时

导航下拉菜单时

关注
发信
关注(28)粉丝(399)

导航下拉菜单时，悬停方式保持不变

本文介绍了导航下拉菜单时，悬停方式保持不变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当用户使用下拉菜单时，我找不到一种使悬停样式保持不变的方法。一旦用户在列表中向下导航，悬停样式将消失。为了更容易解释这个问题，请转到这个小提琴：

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/

将光标悬停在 MORE 按钮上，注意文字颜色的变化。现在，导航下拉菜单，只要您离开更多框，风格恢复正常。问题是，当用户浏览该下拉列表时，如何使悬停样式保持不变？我想要保持白色文字的颜色。

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

这是HTML代码的一部分：

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>

这是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/

推荐答案

将此添加到您的CSS：

Add this to your CSS:

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

DEMO

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

08-05 18:53
Powered by LMLPHP ©2024 导航下拉菜单时 0.042089