Cannot keep jQuery dropdown slide down

Question

So I'm making a website for someone and I'm quite new to jQuery (which probably doesn't help). The site needed a dropdown menu to display links to the galleries in a list rather than having them all in the navigation bar. The problem is, whenever I hover over the li element the dropdown slides down but when I hover over the dropdown, it slides back up.

$(document).ready(function () {
  $("li#navi-dropdown").hover(
    function () {
      $('ul.nav-dropdown').slideDown('medium');
    }, 
    function () {
      $('ul.nav-dropdown').slideUp('medium');
    }
  );
});

Probably something simple, but help is quite welcome. JSFiddle below.

http://jsfiddle.net/6e87Lwkb/

Answer 1

You are toggeling the event in the me handler, you need to do this:

 $(document).ready(function () {
    $("li#navi-dropdown").on('mouseover',function () {
     $('ul.nav-dropdown').slideDown('medium');
  })

  $("ul.nav-dropdown").on('mouseleave',function () {
     $('ul.nav-dropdown').slideUp('medium');
  });
});

I have also updated your fiddle, check it out it works now.

here is my fiddle:

http://jsfiddle.net/6e87Lwkb/7/

Answer 2

Consider putting your ul submenu inside your li, and reposition it. Don't forget to use .stop() too, so as jquery don't queue your slides animations :

$('ul.nav-dropdown').stop().slideDown('medium');

See your updated fiddle here