show/hide the corresponding part content of li?
<p>the hmtl code:  </p>

<pre><code>  &lt;div id="nav"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;test 1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;test 2&lt;/a&gt;
  &lt;div class="sub-nav"&gt;
  &lt;p&gt; &lt;a href="#"&gt;link &lt;/a&gt;  &lt;a href="#"&gt;link &lt;/a&gt; &lt;a href="#"&gt;link &lt;/a&gt;  &lt;/p&gt;
  &lt;/div&gt;

  &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;test 3&lt;/a&gt;
  &lt;div class="sub-nav"&gt;
  &lt;p&gt; &lt;a href="#"&gt;link2 &lt;/a&gt;  &lt;a href="#"&gt;link3&lt;/a&gt; &lt;a href="#"&gt;link4 &lt;/a&gt;  &lt;/p&gt;
  &lt;/div&gt;

&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;test 4&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
  &lt;/div&gt;
</code></pre>

<p>i want to do when the mouse hover on the <strong>li</strong>, it will show the  corresponding part content(<code>sub-nav</code>). when the mouse move off the li, the  corresponding part will be hidden.</p>

<pre><code>.sub-menu css is display:none;
</code></pre>

<p>the following is my code, but doesn't work. </p>

<pre><code>$(function(){

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