CSS中的下拉菜单？答案

【问题标题】：dropup menus in CSS?CSS中的下拉菜单？
【发布时间】：2010-12-01 20:58:02
【问题描述】：

我正在寻找一种构建下拉菜单的方法。基本上，我有一个网站，底部有不同的按钮，其中一些应该有下拉菜单，以便在鼠标悬停时在其上方出现一些按钮。

哦，我想要一个无需大型库甚至无需 javascript 的解决方案（但这只是因为它更简洁，使用 javascript 的解决方案也可以）。

编辑：这是一些代码：

HTML：

<div class="toolbarElement" id="toolbarViewUsers">
    <img src="images/usericon.png" />
    List users
</div>
<div class="toolbarElement" id="toolbarSettings">
    <img src="images/settings.png" />
    Settings
</div>
<div class="toolbarElement" id="toolbarLogout">
    <img src="images/logout.png" />
    Logout
</div>

CSS：

.toolbarElement img {
 display: block;
}

.toolbarElement {
 float: left;
 text-align: center;
 margin-left: 3px;
 margin-right: 3px;
}

看起来是这样的：

编辑2：现在我尝试了这个，但我仍然不知道如何将子菜单放在toolbarElement上方：

CSS：

.toolbarElement {
 float: left;
 text-align: center;
 margin-left: 3px;
 margin-right: 3px;
 position: relative;
}

.submenu {
 position: absolute;
 bottom: 0px;
 left: 0px;
}

HTML：

<div class="toolbarElement" id="toolbarSettings">
 <img src="images/settings.png" />
 Settings
 <div class="submenu">
  Hallo
 </div>
</div>

【问题讨论】：

如果你不关心动画，那么这很容易用一点 CSS。我没有时间详细说明，所以我将其作为评论而不是答案:-)
我们不是来帮你做功课的；给我们一些代码，我们会给你一些帮助。
@cambraca：嗯，我想在项目上方放置可见的悬停 div，但我不知道如何将 div 放在它上面。

标签： css

【解决方案1】：

我认为这是一个很好的例子：

jQuery multi-tiered drop-up menu

观看演示here。

顺便说一句，只是一个警告，演示已经从左下角掉了下来，称我为白痴，但我在看到它之前刷新了 5 次 :)

祝你好运

【讨论】：

啊，好的。好像我必须添加一个空 div 作为方向标记。
没有问题。很高兴它有帮助，祝你好运！！