Question

I’m trying to make slide navigation. Here is my code

html

<li>
    <a href="#">Services</a>
   <div class="subcategories">
    <a href="#">Cleaning</a>
  </div>
</li>

The subcategories div is hidden.

js

$('li a').hover(function() {
  $(this).next().slideToggle('fast', function() {

   });
});

This code works. The problem is that when the mouse goes out of the li a the subcategories div disappears.

What i want is that when the user point the li a the subcategories div to be shown so the user be able to click on some link of the sub navigation.

Answer 1

Try this please Demo http://jsfiddle.net/QEkDa/ or http://jsfiddle.net/qmrHm/

Please let me know if I missed anything!

Hope rest fits the cause :)

code

$(".subcategories").hide();
$('li a').mouseover(function() {
       $(this).next().slideToggle('fast', function() { // <== could use slideDown

    }).mouseout(function() {
        $(".subcategories").slideUp();

    });
});​​