Показать и скрыть подменю меню с несколькими опциями, используя JQuery

Question

У меня есть меню, и я пытаюсь показать и скрыть подменю каждого параметра. HTML структура выглядит следующим образом:

<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> 

В JQuery У меня есть этот код:

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

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

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

}).mouseout(function() { 

}); 

Я не знаю, что делать в «отведении указателя мыши()» событие из-за этого:

1) Если пользователь поместил мышь в меню опций, и после этого наведите указатель мыши на подменю этой опции, подменю должно оставаться открытым и когда пользователь вытащил мышь из подменю, он должен быть закрыт, если пользователь не поместит мышь обратно в меню опций, которое его открыло.

2) Если пользователь поместил мышь в меню опций, и после этого наведите мышку на другое меню опций, подменю этой опции должно быть закрыто.

Кто-нибудь может помочь мне реализовать это событие mouseout()?

Answer 1

Это должно сделать трюк:

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

Answer 2

$(".menu-option").mouseover(function() {  
    $(this).next("ul").fadeIn("fast"); 
    }).mouseout(function() { $(this).next('ul').fadeout(); });