1

这不是我真正的专业领域，所以我什至不完全确定它是如何工作的。我有一个完美创建的菜单，它很有效，请参见这里。

代码：

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

但是，每当我添加第二个下拉菜单时，一切都会变得一团糟。现在，只要将第一个菜单悬停在上面，就会显示子菜单，但会移动另一个菜单。我已经尝试过绝对定位菜单，这也弄乱了 inline-block div。抱歉，如果这令人困惑，该示例会有所帮助。这是第二个菜单的外观。 小提琴

另外，这似乎有点本地化，但实际上并非如此，只是我不知道如何笼统地说，因为我不知道到底是什么搞砸了，而且我不太擅长这种东西。

4

1 回答 1

5

我认为最简单的方法是将“外部”元素浮动<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>

或者只是看看这个小提琴。

于 2013-07-02T06:51:26.047 回答