Стиль Hover остается при навигации по выпадающему меню

Я не могу найти способ заставить стиль зависания оставаться, когда пользователь использует раскрывающийся список. После того, как пользователь переместится вниз по списку, стиль наведения исчезает. Чтобы легче объяснить эту проблему, перейдите на эту скрипту: http://jsfiddle.net/maFb3/

Наведите курсор на кнопку MORE , обратите внимание на то, как изменяется цвет текста. Теперь перейдите в раскрывающееся меню, как только вы покинете поле больше , стиль вернется к норме. Вопрос в том, как мне сделать стиль зависания, когда пользователь перейдет через это падение? Я хочу, чтобы белый цвет текста оставался.

Это стиль зависания, который я использую:

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

Это часть HTML-кода:

  

Вот часть 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 
  • and
    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 pa { 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/

    Добавьте это в свой CSS:

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

    DEMO