【メニューバー】　マウスオーバーで非表示のメニューバーを表示させたいのですが表示位置までの距離が遠くうまくいきません。

###前提・実現したいこと
失礼致します。

初めて質問をするので、至らぬことがあるかもせれませんが
宜しくお願い致します。

・現在マウスオーバーをすると隠れていたメニューが表示されるメニューバーを
制作しています。
マウスオーバーで表示・非表示ができるところまでは調べて作ることができたのですが、
表示されたメニューまでの距離があり、メニューにマウスポインターを持って行く前に
メニューが閉じてしまいます。

デザイン上距離を詰めることができないのですが、
何か方法をご存知の方、これに対する検索ワードをご存知の方に
助言をいただきたく思っております。

宜しくお願い致します。

###該当のソースコード

【HTML】
    <div id="navi">
      <div class="navi_1">
        <ul class="ddmenu">
          <li ><a href="">HOME</a></li>
          <li ><a href="">ABOUT</a></li>
          <li class="menu__mega"><a class="init-bottom">CATEGORY<span class="arrow"><img src="http://blog.livedoor.jp/spantonn/img/arrow_off.png"></span></a></li>
          <li ><a href="">CONTACT</a></li>
        </ul>
      </div>

        <div class="navi_2">
          <ul>
            <li ><a href="">1</a></li>
            <li ><a href="">2</a></li>
            <li ><a href="">3</a></li>
            <li ><a href="">4</a></li>
            <li ><a href="">5</a></li>
            <li ><a href="">6</a></li>
            <li ><a href="">7</a></li>
            <li ><a href="">8</a></li>
            <li ><a href="">9</a></li>
            <li ><a href="">10</a></li>
            <li ><a href="">11</a></li>
          </ul>
        </div>

      </div>

【css】

#navi {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 20px;
}


#navi .arrow img {
  width: 13px;
}

#navi ul.ddmenu {
  width: 550px;
  margin: 0 auto;
  padding: 0px 0px 0px 15px;
}

#navi ul.ddmenu li {
   padding: 0px 32px 0px 32px;
   display: inline-block;
}

#navi ul.ddmenu a {
   color: #888888;
   line-height: 40px;
   text-align: center;
   text-decoration: none;
   font-family: "Futura",serif;
   display: block;
   cursor: pointer;
}

#navi ul.ddmenu a:hover {
   color: #000;
}



.navi_2 {
  display: none;
  margin-top: 15px;
  margin-bottom: 30px;
}

.navi_2 ul{
  height: 60px;
  background-color: #f4f4f4;
}

.navi_2 ul li {
  margin: 0 -55px 0 90px;
  padding-top: 24px;
  padding-left: 10px;
  display: inline-block;
}

.navi_2 ul li a {
  color: #000;
  text-decoration: none;
}



【jQuery】
    <script type="text/javascript">
    $(function(){
      $(".menu__mega").hover(function(){
        $(".navi_2").slideToggle();
      });
    });
    </script>

m.ts10806

2017/09/27 02:05

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）　正しくできているかどうかは質問編集画面のプレビューを見ながら編集していってください。

spantonn

2017/09/27 02:41

ご指摘ありがとうございます、　修正致しました。

行動規範の内容に同意します

回答2件

ベストアンサー

0.2秒間だけ遅延させて見ました

javascript
1$(function(){
2  var timerId;
3  $(".menu__mega,.navi_2").on({
4    'mouseover':function(){
5      clearTimeout(timerId);
6      $(".navi_2").slideDown();
7    },
8    'mouseout':function(){
9      timerId=setTimeout(function(){
10        $(".navi_2").slideUp();
11        },200);
12    },
13  });
14});
15
16