CSS中的下拉菜单？

问题描述

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

哦，我想有一个解决方案，没有大的库，甚至没有javascript（但这只是因为它更干净，一个解决方案与JavaScript也可以工作）。

修改：以下是一些代码：

HTML：

 < div class =toolbarElementid =toolbarViewUsers> 
< img src =images / usericon.png/> 
列出用户
< / div> 
< div class =toolbarElementid =toolbarSettings> 
< img src =images / settings.png/> 
设置
< / div> 
< div class =toolbarElementid =toolbarLogout> 
< img src =images / logout.png/> 
注销
< / div> 
  

CSS：

 code> .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 =toolbarElementid =toolbarSettings> 
< img src =images / settings.png/> 
设置
< div class =submenu> 
 Hallo 
< / div> 
< / div> 
  

解决方案

这里是我认为的一个很好的例子： / p>

观看演示。

BTW只是一个警告，演示已下降在左下角，白痴，但我刷新了5次，我看到它：）

祝你好运

I am looking for a way to build a dropup menu. Basically, I have a website that has different buttons at the bottom and some of them should have dropup menus so that a few buttons apper above it on mouseover.

Oh, and I'd like to have a solution that works without big libraries and maybe even without javascript (but that's just because it's cleaner, a solution with javascript would also work).

Edit: Here's some code:

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

This is how it looks:

Edit 2: Now I tried this, but I still don't know how to place the submenu above the 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>

解决方案

Here is what I think is a good example:

jQuery multi-tiered drop-up menu

Watch demo here.

BTW just a warning the demo has de drop up way down in the left corner, call me an idiot but i refreshed 5 times before i saw it :)

Good luck

这篇关于CSS中的下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！