Keep parent menu item highlighted after hovering over submenu (HTML/CSS/Jquery)

Question

I have a menu with the possibility that some menu items will have subitems. Pretty simple, actually. I would like to achieve that once the submenu is moused over, the corresponding (parent) menu item is highlighted as well. This never happens because seems like as soon as the mouse leaves the menu item and gets over the submenu, the browser styles it to its default style. Any help appreciated! Thanks a lot!

Menu 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');
        }
    );
});

Example can be found here: http://jsfiddle.net/qguTz/

score 93 · Accepted Answer · answered May 28 '13 at 23:05

93

Oh, now I don't know how this didn't occur to me before... I will answer it:

It is enough to swap this:

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

for this:

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

answered May 28 '13 at 23:05

Fygo

4,555
6
33
47

1

Haha! Simple in concept, but obscure enough that it takes a second to think about it :) Well played sir, you saved me some time! – Jeff.Clark Aug 22 '14 at 21:26
I love this answer, been trying to get it to work using JS for some time now. such a help – Eolis Mar 02 '15 at 22:36
Thank you -- this has taught me a little bit more about using selectors! – Gerard ONeill Jun 02 '15 at 20:20
Wow, I had the exact same issue. You hit the nail on the head! Thanks a bounch! – AVIDeveloper Jun 18 '15 at 22:15
What about a 3 level menu as in here, http://stackoverflow.com/questions/35300274/how-to-keep-all-the-parent-except-the-first-li-highlighted-when-the-sub-li-is-ho – Si8 Feb 10 '16 at 16:40
You saved me. Wasted 30 mins before doing exactly this swap. Ah the joys of css :) – codegeek Feb 21 '17 at 06:50
How does this work exactly? Is it just setting everything inside the li with submenus to have that background? – OMGDrAcula Jul 14 '17 at 16:28
@OMGDrAcula The wrong/old rule said: paint red any anchor link element that is hovered. Only and only that. The new rule is: paint red any direct descendant anchor link of a list item that is hovered. And because the submenu's anchor link is inside a list-item which is inside of a 'parent' list-item, any time you hover this link you hover the parent li, too. That paints both the menu's and submenu's direct anchor link red (if you remove the greater than symbol, all submenus will be red). I hope I explained it clearly enough. – Fygo Jul 18 '17 at 09:58
@Fygo Thanks for the explanation! – OMGDrAcula Jul 18 '17 at 13:20

score 4 · Answer 2 · answered May 28 '13 at 23:03

To achieve that, you need two little modification.

First one is the CSS. I added a selector to an already existing style declaration :

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

Then i changed the css to add that class :

$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');
    }
);

Then, everything worked! http://jsfiddle.net/qguTz/6/

Thank you very much, this looks like a good solution as well! — Fygo, May 28 '13 at 23:08

score 0 · Answer 3 · answered May 28 '13 at 23:08

0

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

answered May 28 '13 at 23:08

kraysak

1,746
1
13
14

http://stackoverflow.com/questions/35300274/how-to-keep-all-the-parent-except-the-first-li-highlighted-when-the-sub-li-is-ho Please help... – Si8 Feb 10 '16 at 16:40

Keep parent menu item highlighted after hovering over submenu (HTML/CSS/Jquery)

3 Answers3

Linked