css - CSS 中的下拉菜单？

Question

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

哦，我希望有一个解决方案可以在没有大库甚至没有 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>

Answer 1

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

jQuery multi-tiered drop-up menu

观看演示 ​​here .

顺便说一句，只是一个警告，演示已经从左下角下降，叫我白痴，但我刷新了 5 次才看到它:)

祝你好运