jQueryのご質問：アコーディオンメニューが開きすぎます

Question

前提

アコーディオンメニューをjQueryを利用して作りたいと思っています。
４つのナビゲーションメニューのうち1つをアコーディオンメニューにするパターンを作りたい思っています。
以下のリンクを参考に作成しています。
リンク内容

実現したいこと

メニュー0、メニュー1、メニュー2、メニュー3　があり「メニュー1」のみアコーディオンメニューにしたいです。

発生している問題・エラーメッセージ

メニュー1を開くと、なぜか他メニューも開きます。（赤、緑、青の部分）
赤、緑、青箇所は開かないようにしたいです。
事象内容は添付画像を御覧ください。（メニューを開いた時、閉じた時の画像です。）

該当のソースコード

<nav>
  <ul class="menu">
    <li class=”current” id="current-menu"><a href=”#”>メニュー0</a></li>
    <li class="menu_item">
          <a class="menu_item_link js-menu_item_link" href="">メニュー1</a>
          <ul class="submenu">
              <li class="submenu_item">
                  <a href="">サブ1</a>
              </li>
              <li class="submenu_item">
                  <a href="">サブ2</a>
              </li>
              <li class="submenu_item">
                  <a href="">サブ3</a>
              </li>
              <li class="submenu_item">
                  <a href="">サブ4</a>
              </li>
          </ul>
      </li>
    <li id="menu2"><a href=”#”>メニュー2</a></li>
    <li id="menu3"><a href=”#”>メニュー3</a></li>
  </ul>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

ul{
display: table;
margin: 0 auto;
padding: 0;
width: 100%;
text-align: center;
}

ul li{
display: table-cell;
min-width: 50px;
}

ul li a{
display: block;
width: 100%;
padding: 20px 0;
text-decoration: none;
color: #ccc;
font-weight: bold;
}

#current-menu{
  background-color: red;
}

#menu2{
  background-color: green;
}

#menu3{
  background-color: blue;
}

ul li.current a{
color: #555;
}

ul li a:hover{
color: #E71B1F;
}

/* アコーディオンメニュースタイル */
.menu_item {
  background: #5200b7;
  color: #fff;
}
.menu_item_link {
  color: #fff;
}
 
.submenu {
  background: #fff;
  display: none;
}
.submenu_item {
  color: #222;
  display: block;
}

$(function(){
    $('.js-menu_item_link').each(function(){
        $(this).on('click',function(){
            $("+.submenu",this).slideToggle();
            return false;
        });
    });
});

参考にしたURL

https://webdesignday.jp/inspiration/technique/css/5670/
「ベースのHTML・CSS・jQuery」箇所

補足情報（FW/ツールのバージョンなど）

Chrome拡張機能のWeb makerを利用しています。
最後まで読んでくださりありがとうございます。
ご回答いただければ幸いです。

Answer 1

display: table; でテーブルにしているのでそうなりますね。

サブメニューを絶対配置して、フローから外せばいいでしょう。
CSSに下記を追加してください。

.menu_item {
  position: relative;
}
.submenu {
  position: absolute;
}

Comments

[mariposa]

hatena19さん。
ご回答頂きありがとうございます！

試してみます！

[mariposa]

hatena19さん
頂いたCSS適用し解決しました！ありがとうございました。