悬停显示子菜单时的所有CSS菜单

Question

这不是我的专业知识,所以我甚至不完全确定这是如何工作的.我有一个完美的单一菜单,有效,见这里.

码:

<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;
}

但是,每当我添加第二个下拉菜单时,一切都搞砸了.现在,只要第一个菜单悬停在上面,子菜单就会显示,但另一个菜单会被移动.我已经尝试过绝对定位菜单,这也会影响内联块div.很抱歉,如果这令人困惑,示例会有所帮助.以下是第二个菜单的外观. 小提琴

此外,这似乎有点本地化,但实际上并非如此,只是因为我不知道如何将其置于一般条款,因为我不知道究竟是什么搞乱了,而且我不太喜欢这种东西.

Answer 1

在我看来,最简单的方法是将"外部" <div>元素浮动到左边而不是用"内联块"定位它们.HTML将如下所示:

<div style="float:left;" id="menu1outer">
    <a href=""><div class="menus">Menu 1</div></a>
    <a href=""><div id="submenus1" class="submenus">Sub 1</div><a/>
    <a href=""><div id="submenus1" class="submenus">Sub 2</div><a/>
    <a href=""><div id="submenus1" class="submenus">Sub 3</div><a/>
</div>

<div style="margin-left:50px;float:left;" id="menu2outer">
    <a href=""><div class="menus">Menu 2</div></a>
    <a href=""><div id="submenus2" class="submenus">Sub 1</div><a/>
    <a href=""><div id="submenus2" class="submenus">Sub 2</div><a/>
    <a href=""><div id="submenus2" class="submenus">Sub 3</div><a/>
</div>

或者看看这个小提琴.