Question

I have a menu and i am trying to show and hide the submenu of each option. The HTML struct is the following:

<a href="/page" class="menu-option" rev="1">Option 1</a>

<ul id="submenu-1" class="submenu" style="display:none">
    <li><a href="/page">Option A</a></li>
    <li><a href="/page">Option C</a></li>
</ul>

<a href="/page" class="menu-option" rev="2">Option 2</a>

<ul id="submenu-2" class="submenu" style="display:none">
    <li><a href="/page">Option C</a></li>
    <li><a href="/page">Option D</a></li>
</ul>

In JQuery i have this code:

$(".menu-option").mouseover( function() {

    var id_option = $(this).attr("rev");

    $("#submenu-" + id_option).fadeIn("fast");

}).mouseout( function() { 

});

I don’t know what to do in the “mouseout()” event because of this:

1) If the user put the mouse in the option menu and after this put the mouse over the submenu of this option, the submenu must keep open and when the user put the mouse out of the submenu, it must be closed if the user doesn’t put the mouse back at the option menu that opened it.

2) If the user put the mouse in the option menu and after this put the mouse over other option menu, the submenu of this option must be closed.

Anybody can please help me to implement this “mouseout()” event?

Answer 1

This should do the trick:

Demo Here

CSS

.menu-container {
    float: left;
    display: block;
    width: 150px;
}

.submenu {
    display: none;
}

​

HTML

<ul id="submenu-1" class="menu-container">
    <li>
        <a href="/page" class="menu-option" rev="1">Option 1</a>
        <ul class="submenu">
            <li><a href="/page">Option A</a></li>
            <li><a href="/page">Option C</a></li>
        </ul>
    </li>
</ul>

<ul id="submenu-2" class="menu-container">
    <li>
        <a href="/page" class="menu-option" rev="2">Option 2</a>
        <ul class="submenu">
            <li><a href="/page">Option C</a></li>
            <li><a href="/page">Option D</a></li>
        </ul>
    </li>
</ul>​

JS

//Menu system
$('.menu-container li').hover(function() {
    //show its submenu
    $('ul', this).fadeIn(100);

}, function() {
    //hide its submenu
    $('ul', this).fadeOut(100);
});