Question

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/

Answer 1

Add this to your CSS:

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

DEMO