Add hover class to 2nd level menu links

Question

I have a vertical mega menu. When you hover over a link that has children it shows another vertical menu to the right and so on. When you hover away from those associated submenus, they are hidden and the menu is reset.

I'm adding a class to the parent link so that the hover state stays active, this works fine. However, my issue is with the 2nd level links that have a sub menu. I'm trying to do exactly the same but with these links but whatever I try doesn't appear to work.

This is what I want to achieve, notice how the 2nd Level Page link has a pink background when the 3rd level menu is open:

This is the JS I'm using and accompanying JSFiddle to show you the stage I'm at currently: http://jsfiddle.net/mz9abf43/2/

$( ".menu li.menu-item-has-children a, .menu li.menu-item-has-children > .drop" ).mouseover(function() {
    $('.menu li.menu-item-has-children a').addClass('go');
    $('.menu li.menu-item-has-children > .drop a').removeClass('go');
});

$( ".menu li.menu-item-has-children > .drop a" ).mouseover(function() {
    $('.menu li.menu-item-has-children > .drop a').addClass('go');
});

$( ".menu li.menu-item-has-children > *" ).mouseout(function() {
    $('.menu li.menu-item-has-children a').removeClass('go');
});

UPDATE I am not committed to the JS solution I've been tinkering with so have no issues with a CSS solution. I just want a solution that makes it work.

this would be so much **simpler** using CSS and absolutely no javascript — Jaromanda X, Sep 24 '15 at 10:52
A CSS solution can do this job more much simply. E.g. http://codepen.io/lisa_c/pen/QwyoQq — Paul Redmond, Sep 24 '15 at 10:54
Here's one on SO: http://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu — Paul Redmond, Sep 24 '15 at 10:56

score 1 · Answer 1 · answered Sep 24 '15 at 11:15

The basic solution, which you can complement with any other style you need

/* Hide all child lists */
li > ul {
    display: none;
}

/* Hovering list item will cause the child menu to be displayed */
li:hover > ul {
    display: block;
}

/* Default style for the menu item */
li {
    color: black;
}

/* Hover style for each menu item, add more if you have more levels */
ul > li:hover,
ul > li > ul > li:hover,
ul > li > ul > li > ul > li:hover {
    color: red;
}

<ul>
    <li>
        Item 1
        <ul>
            <li>
                Item 1 a
            </li>
            <li>
                Item 1 b
                <ul>
                    <li>
                        Item 1 b I
                    </li>
                    <li>
                        Item 1 b II
                    </li>
                    <li>
                        Item 1 b III
                    </li>
                </ul>                
            </li>
            <li>
                Item 1 c
            </li>
        </ul>
    </li>
    <li>
        Item 1
    </li>
    <li>
        Item 1
    </li>
</ul>

score 0 · Accepted Answer · answered Sep 24 '15 at 11:59

Simple solution is in css shown below,

What I have done:

Remove all the JS code you have added for this hovering functionality.
Add the class highlight to all the elements which needs to be highlighted(background-color:pink) on hover.

CSS CODE:

.highlight:hover {
         background: pink;
}

//comment below css styles
/*.menu li a:hover,
.menu li a.go { background: pink;  }*/

Live Demo @ JSFiddle

Add hover class to 2nd level menu links

2 Answers2