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

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

此外，这似乎有点本地化，但实际上并非如此，只是我不知道如何将其置于一般条款，因为我不知道是什么正好搞砸了，我对这种东西不太好。

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>

或者只是查看this小提琴。

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

1 个答案: