liの対応する部分の内容を表示/非表示しますか？

Question

HMTLコード：

<div id="nav"> 
<ul> 
<li><a href="#">test 1</a></li> 
<li><a href="#">test 2</a> 
    <div class="sub-nav"> 
    <p> <a href="#">link </a> <a href="#">link </a> <a href="#">link </a> </p> 
    </div> 

    </li> 
<li><a href="#">test 3</a> 
    <div class="sub-nav"> 
    <p> <a href="#">link2 </a> <a href="#">link3</a> <a href="#">link4 </a> </p> 
    </div> 

</li> 
<li><a href="#">test 4</a></li> 
</ul> 
    </div> 

iは李上でマウスホバーは、それが対応する部分のコンテンツ（sub-nav）が表示されます時にやりたいです。マウスがliから離れると、対応する部分が非表示になります。

.sub-menu css is display:none; 

以下は私のコードですが、動作しません。

$(function(){ 

    $("#nav ul li").mouseenter(function() { 
     $(this).find(".sub-menu").show(); 
    }); 
}); 

Answer 1

あなたはCSSとJavaScriptで.sub-menuクラスを持ってチェックしますが、マークアップで.sub-nav。

$("#nav ul li").hover(function() { 
    $(this).find(".sub-nav").show(); 
}, function() { 
    $(this).find(".sub-nav").hide(); 
});​ 

DEMO：http://jsfiddle.net/e8GYJ/

Answer 2

hover()イベントコールバックを試してみてください。http://api.jquery.com/hover/

Answer 3

$("#nav ul li").mouseenter(function() { 
     $(this).find(".sub-menu").show(); 
    }.mouseleave(function(){ 
     $(this).find(".sub-menu").hide(); 
    }); 

は、チェックアウトこのコードを...これはあなた

Answer 4

をしようと助け

希望ここ

は、実用的なソリューションでありますユーザーhover関数：

$("li").hover(
    function() { 
    $(this).find(".sub-menu").show(); 
    }, 
    function() { 
    $(this).find(".sub-menu").hide(); 
    } 
);