mouseoutのドロップダウンリスト情報を失う

Question

私はさまざまなリンクを設定する簡単なドロップダウンリストを作成しました。それは約50項目を含んでいるので、私はそれをスクロール可能にするためにdivにラップしました。問題は、私がマウスアウトすると、最初の2つのリストの要素が表示されていない限り、リスト全体を失うことです。私は、このドロップダウンをサブメニューとして構成しました。最初の2つのリンクは、「コンテナ」形式です。

私はリスト全体を失っている理由を幾分理解していますが、トップリンクをマウスアウトで再現する方法を理解できません。

$('.myMenu > li').bind('mouseover', openSubMenu); 
function openSubMenu() { 
     $('.myMenu').css('overflow','auto'); 
     $('.myMenu').css('height','400px'); 
     $('.ulMenu').css('visibility', 'visible'); 
}; 
$('.myMenu > li').bind('mouseout', closeSubMenu); 
function closeSubMenu() { 
     $('.myMenu').css('overflow','hidden'); 
     $('.myMenu').css('height','20px'); 
     $('.ulMenu').css('visibility', 'hidden'); 
    } 
} 
</script> 




<div id="menu"> 
    <ul class="myMenu"> 
    <li id="li_left"><a href="#"> Application </a></li> 
     <li id="li"> <a href="#"> Hover For Listing</a> 
      <ul id="tasksUl" class="ulMenu"> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

あなたはまた、リストのために.cssを投稿する必要があると思います。私はあなたがメニューを持って考えると、あなたはあなたが

$('.myMenu').css('height','20px'); 

を設定している<li id="li"> <a href="#"> Hover For Listing</a>

をホバリング上のリストを開きたいとあなたがそれを行うだろう、なぜ私は得ることはありません。また、.cssスタイルはかなり廃止されました。フィドルここ

チェック：魔法のようにhttp://jsfiddle.net/eR2y9/1/

作品。メニューの高さを追加する必要はありません。内側の項目の量に応じて動的に調整されるからです。また、何も表示されないように設定されている場合は、スペースを空けていません。さらに質問がある場合、または私があなたの問題を誤解した場合、私の投稿に返信してください。