无法保持jQuery下拉列表滑落

所以我正在为某个人创建一个网站,而且我对jQuery很新(这可能没什么帮助).该网站需要一个下拉菜单,以显示列表中的图库链接,而不是在导航栏中显示所有链接.问题是,每当我将鼠标悬停在li元素上时,下拉列表会向下滑动,但当我将鼠标悬停在下拉列表上时,它会向上滑动.

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

可能很简单,但非常欢迎帮助.JSFiddle如下.

http://jsfiddle.net/6e87Lwkb/