Dropdown hover state

Question

HTML:

<ul class="dropdown">
    <li><a href="#">Item 1</a></li>
    <li>
        <a href="#">Item 2</a>
        <div class="submenu">something</div>
    </li>
</ul>

jQuery:

    $j("ul.dropdown li").hover(function () {
        $j(this).addClass("hover");
        $j('div.submenu', this).css('visibility', 'visible').hover(function () {
                $j(this).prev('a').addClass('hover');
            }, function () {
                $j(this).prev('a').removeClass('hover');
            });    
    }, function () {
        $j(this).removeClass("hover");
        $j('div.submenu', this).css('visibility', 'hidden');
    });

... the menu works fine, but the navigation link (that opens the dropdown) should stay highlighted when on the dropped-down menu. How do I maintain hover state on both the link and the submenu when they're open?

Thanks!

Answer 1

Try something like this:

$j("ul.dropdown li").hover(function () {
    $j(this).children('a').andSelf().addClass("hover");
    $j('div.submenu', this).css('visibility', 'visible');
}, function () {
    $j(this).children('a').andSelf().removeClass("hover");
    $j('div.submenu', this).css('visibility', 'hidden');
});

If you don't explicitly need visibility and display will work, you can do this:

$j("ul.dropdown li").hover(function () {
    $j(this).children('a').andSelf().addClass("hover");
    $j('div.submenu', this).show();
}, function () {
    $j(this).children('a').andSelf().removeClass("hover");
    $j('div.submenu', this).hide();
});

Answer 2

If you use visibility: hidden instead of display: none, the page will reserve the visual space that the element should occupy, which typically isn't what is desired with a nested menu

If visibility is what you want, ignore me. Otherwise, here's an alternative that uses display (that keeps each selected item in the hierarchy highlighted, which seemed to be what your question was asking for):

Style

li.hover { background: #eee; }
li.hover ul { background: #fff; }
ul ul { display: none; }

HTML

<ul>
    <li><a href="#">Item 1</a></li>
    <li>
        Item 2
        <ul>
            <li><a href="#">Item 2.a</a></li>
            <li>
                Item 2.b
                <ul>
                    <li><a href="#">Item 2.b.1</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
</ul>

jQuery

$(function() {
    $("ul li").hover(
        function () {
            $(this).addClass("hover").children("ul").show();
        },
        function () {
            $(this).removeClass("hover").children("ul").hide();
        }
    );
});