Question

the hmtl code:

  <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 want to do when the mouse hover on the li, it will show the corresponding part content(sub-nav). when the mouse move off the li, the corresponding part will be hidden.

.sub-menu css is display:none;

the following is my code, but doesn’t work.

$(function(){

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

Answer 1

Check you have .sub-menu class in CSS and JavaScript but .sub-nav in the markup.

Here is the working solution:

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

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