Question

I have a dropdown issue on my navigation pane.

Here is my javascript:

$(document).ready(function () {
$('#column .subnav li').hover(
  function () {
   //show its submenu
   $('ul', this).slideDown();
  }, 
  function () {
   //hide its submenu
   $('ul', this).slideUp();         
  }
);
});

My navigation markup:

<ul>
<li><a href=#" style="font-weight:bold;">Administrator Record</a>
    <ul>
        <li><a href="#">Change Password</a></li>
        <li><a href="#">Add Administrator</a></li>
        <li><a href="#">Edit Administrator</a></li>
        <li><a href="#">Delete Administrator</a></li>
    </ul>
</li>
<li><a href=#" style="font-weight:bold;">Student Record</a>
    <ul>
        <li><a href="#">Add Student</a></li>
        <li><a href="#">Edit Student</a></li>
        <li><a href="#">Delete Student</a></li>
    </ul>
</li>
</ul>

This works fine, but sometimes whenever I hover on the “Administrator Record” the dropdown slides up and down unusually. Hovering out then hovering in back fixes this. Any suggestion?

Answer 1

Try this, remember to replace ul li etc. with your ids:

$(document).ready(function () {
    $('ul li, ul li ul').hover(
      function () {
       //show its submenu
       $('ul', this).slideDown();
      }, 
      function () {
       //hide its submenu
       $('ul', this).slideUp();         
      }
    );
});

I have added ul li ul as another selector, so when you hover over this it still shows or hides the menu.

Also, I noticed an error in your mark up, check the links and the quotes,