div - Mantenga el elemento del menú principal resaltado después de desplazarse por el submenú(HTML/CSS/Jquery)

jquery html

Question

Tengo un menú con la posibilidad de que algunos elementos del menú tengan subelementos. Bastante simple, en realidad. Me gustaría lograr que, una vez que el submenú haya finalizado, el elemento correspondiente del menú (padre) también esté resaltado. Esto nunca sucede porque parece que tan pronto como el mouse abandona el elemento del menú y pasa por el submenú, el navegador lo ajusta a su estilo predeterminado. Cualquier ayuda apreciada! ¡Muchas gracias!

Menú html:

<div id="top_navigation">
        <ul>
            <li><a href="#">item1</a></li>
            <li><a href="#">item2</a>
                <ul class="submenu">
                    <li><a href="#">sub1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li class="selected_menu_item"><a href="#">sub3</a></li>
                </ul>
            </li>
            <li><a href="#">item3</a></li>
            <li><a href="#">item4</a></li>
        </ul>
    </div>

CSS:

#top_navigation {
    width: 1248px;
    margin: 0 auto;
    position: relative;
    text-transform: uppercase;
    font-family: "Rounded Font", sans-serif;
    font-size: 23px;
}
#top_navigation ul ul {
    display: none;
}
#top_navigation ul {
    padding-left: 0;
}
#top_navigation ul li {
    margin: 0;
    padding: 0;
    float: left;
    width: 312px;
    height: 64px;
    line-height: 64px;
    font-size: 20px;
    list-style: none;
}
#top_navigation ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #eb1f10;
    background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
    background-color: #eb1f10;
    color: #FFF;
}
#top_navigation ul li a:hover {
    background-color: #eb1f10;
    color: #FFF;
}
#top_navigation li li {
    height: 42px;
    line-height: 42px;
    border-top: #eb1f10 1px solid;
}

JS / Jquery:

$(document).ready(function () {
    var $nav = $(''#top_navigation > ul > li'');
    $nav.hover(
        function() {
            $(''ul'', this).stop(true, true).slideDown(''fast'');
        },
        function() {
            $(''ul'', this).slideUp(''fast'');
        }
    );
});

El ejemplo se puede encontrar aquí: http://jsfiddle.net/qguTz/

Answer 1

Oh, ahora no sé cómo esto no se me había ocurrido antes ... lo contestaré:

Basta con cambiar esto:

#top_navigation ul li a:hover {
    background-color: #eb1f10;
    color: #FFF;
}

para esto:

#top_navigation ul li:hover > a {
    background-color: #eb1f10;
    color: #FFF;
}

Answer 2

Para lograrlo, necesitas dos pequeñas modificaciones.

El primero es el CSS. Agregué un selector a una declaración de estilo ya existente:

#top_navigation ul li a:hover, #top_navigation ul li a.hovered {
    background-color: #eb1f10;
    color: #FFF;
}

Luego cambié el css para agregar esa clase:

$nav.hover(
    function() {
        $(this).children(''a'').addClass(''hovered'')
        $(''ul'', this).stop(true, true).slideDown(''fast'');
    },
    function() {
        $(this).children(''a'').removeClass(''hovered'')
        $(''ul'', this).slideUp(''fast'');
    }
);

Entonces, todo funcionó! http://jsfiddle.net/qguTz/6/

Answer 3

http://jsfiddle.net/qguTz/10/

$nav.hover(
    function() {
        $(''ul'', this).stop(true, true).slideDown(''fast'');

        $(''a'',this).first().css({"background-color":"#eb1f10", "color":"#FFF"});
    },
    function() {

        $(''ul'', this).slideUp(''fast'');
       $(''a'',this).first().css({"background-color":"#FFF", "color":"#eb1f10"});
    }