【jQuery】マウスオーバーでドロップダウンメニューを表示させる方法

<li class="menu__name">menu-1

  <!-- liタグの中にulタグを入れる（ドロップダウンで表示させる部分） -->
  <ul class="drop-menu">
    <li class="drop-menu__name"><a href="">menu-1_1</a></li>
    <li class="drop-menu__name"><a href="">menu-1_2</a></li>
    <li class="drop-menu__name"><a href="">menu-1_3</a></li>
  </ul>
</li>

/* 位置の基準を設定 */
.menu__name {
	position: relative;
}

.drop-menu {
	/* 初期は表示しない */
  display: none;
	/* 「menu__name」を基準に表示位置を指定 */
	position: absolute;
	/* 「menu__name」の高さ分下に下げて真下に表示 */
	top: 100%;
}

$(function () {
  // マウスオーバーした時の動作
  $("ul.menu li").hover(
    function () {
      // 下にスライドして表示
      // :not(:animated)をすることで連続してマウスオーバーしても連続して動作しなくなる
      $(".drop-menu:not(:animated)", this).slideDown();
    },
    // マウスオーバーを外したら上にスライドして非表示になる
    function () {
      $(".drop-menu", this).slideUp();
    }
  );
});