導航下拉菜單中保持懸停樣式

Question

我無法找到一種方法在用戶使用下拉菜單時保留懸停樣式。一旦用戶向下導航列表，懸停樣式消失。要解釋此問題更容易，請轉到此提琴：http://jsfiddle.net/maFb3/

將光標懸停在更多按鈕上，注意文本顏色的變化方式。現在，當您離開框後，立即導航下拉菜單，樣式會恢復正常。問題是，當用戶通過該下拉菜單導航時，如何保持懸停樣式？我想保留白色文字顏色。

這是hover樣式我用：

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/

Answer 1

添加到您的CSS：

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

DEMO