dropup menus in CSS?

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>

Answers


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


Need Your Help

Why does postfix operator++ have higher precedence than prefix operator++?

c++ increment precedence prefix-operator postfix-operator

Defined this way, we can do neither ++x++ nor ++x--. But on the other hand, both (++x)++ and (++x)-- are useful expressions: (++x)++ increments x by two and returns the value "in the middle", while

Is there a way to let wysithtml5's link editor let the user add anything they like to the href tag?

javascript callback href text-editor wysihtml5

I'm using the wysithtml5 editor, but users are reporting a lot of issues with adding links. User want to add whatever they want to the href attribute. However when clicking 'ok' on adding the link it

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.