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.