css - サブメニューを表示するホバー時のすべての CSS メニュー

Question

これは私の専門分野ではないので、これがどのように機能するのか完全にはわかりません。私は完全に作成された単一のメニューを持っています。これは機能します。 HEREを参照してください。

コード：

<div style="display:inline-block" id="menu1outer">
  <div class="menus" style="cursor:pointer;">Menu</div>
    <a href="">
      <div id="submenus1" class="submenus" style="background-color:#1734c7;">
        Sub 1
      </div>
    <a/>
    <a href="">
      <div id="submenus1" class="submenus" style="background-color:#3151f6">
        Sub 2
      </div>
    <a/>
    <a href="">
      <div id="submenus1" class="submenus" style="background-color:#6780ff">
        Sub 3
      </div>
    <a/>
  </div>

また、CSS は次のとおりです。

.menus {
    width:100px;
    height:50px;
    border: 5px solid #000000;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    color: black;
    background-color: #dcdcdd;
}
.submenus {
    margin-top:10px;
    display:none;
    width:100px;
    height:50px;
    border: 5px solid #000000;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    color: black;
}
#menu1outer:hover #submenus1 {
    display: block;
}

ただし、2 つ目のドロップダウン メニューを追加すると、すべてが台無しになります。最初のメニューにカーソルを合わせると、サブメニューが表示されますが、他のメニューは移動します。私はすでにメニューを絶対に配置しようとしましたが、これはインラインブロックの div も台無しにします。これが紛らわしい場合は申し訳ありませんが、例が役に立ちます。これは、2番目のメニューでどのように見えるかです。 フィドル

また、これは少しローカライズされているように見えますが、実際にはそうではありません。正確に何がめちゃくちゃになっているのかわからないため、一般的な用語で表現する方法がわからないだけで、あまり得意ではありません。この種のもの。