jQuery プルダウンメニュー

質問

プルダウンメニューの一部で行き詰っています。

メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時
メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。

サブメニューにカーソルがある時、メニューはhoverさせないようにする。

▼html-----------------------------------------
<ul id="gNav">
<li>メニュー1
<ul>
<li><a href="">サブメニュー1-1</a></li>
</ul>
</li>
<li>メニュー2
<ul>
<li><a href="">サブメニュー2-1</a></li>
<li>サブメニュー2-2
<ul>
<li><a href="">サブメニュー2-2-1</a></li>
<li><a href="">サブメニュー2-2-2</a></li>
<li><a href="">サブメニュー2-2-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">メニュー3</a></li>
</ul>

▼jQuery-----------------------------------------
$(function(){

$("#gNav > li").click(function(){
$(this).children("ul").toggle();
});

$("#gNav > li > ul > li").mouseenter(function(){
$(this).children("ul").show();
}).mouseleave(function(){
$(this).children("ul").hide();
});

$("#gNav > li").hover(function(){
$(this).css("background-color","#ff9900");
},function(){
$(this).css("background-color","#ffcc00");
});

$("#gNav > li > ul > li").hover(function(){
$(this).css("background-color","#99cc66");
},function(){
$(this).css("background-color","#669933");
});

$("#gNav > li > ul >li > ul >li").hover(function(){
$(this).css("background-color","#dddddd");
},function(){
$(this).css("background-color","#eeeeee");
});

});

宜しくお願いします。

回答No.1

kosukejlampnet

http://jqueryui.com/accordion/