Patterns for a jQuery or CSS pop-up menu from a button

I'm trying to figure out the best patterns for making a jQuery-based or CSS-based pop-up menu when clicking a button.

I'd like to have something like this:

I'm not even sure how to conceptualize going about this, so any help would be appreciated. Make it high-level if开发者_StackOverflow中文版 you want, though a working example (JSFiddle) would be best.

Thanks!

This was actually fairly easy to figure out, and much thanks is owed to @NateL in #jquery on IRC for helping me figure out the CSS on this.

Here's what I implemented:

CSS

.all-checkboxes-menu
{
  position: absolute;
  width: auto;
  height: auto;
  display: none;
  top: 28px;
  left: 7px;
  background-color: white;
  z-index: 1;
  box-shadow: 0px 5px 5px #999;
  -moz-box-shadow: 0px 5px 5px #999;
  -webkit-box-shadow: 0px 5px 5px #999;
}

.tasks-submenu
{
  padding: 5px;
}

.tasks-submenu li
{
  list-style: none;
  padding-top: 2px;
  padding-bottom: 2px;
}

.tasks-submenu li:hover
{
  background-color: #fcf7bd;
}

HTML

        <div class="all-checkboxes-menu">
          <ul class="tasks-submenu">
            <li>All</li>
            <li>None</li>
            <li>Due Today</li>
            <li>Overdue</li>
          </ul>
        </div>

The crucial portion of the CSS is the position: absolute, and the parent div must be explicitly given position: relative. Note that display: none is used initially. In the jQuery code, I call .css({'display': 'block'}) to show the submenu.

The result looks like this:

We implemented that menu at the following location

http://www.allposters.com/ and even www.art.com , as it is javascript code you can copy the code from one of the javascriptfiles.

Its header_menu.js.

If you want to achieve without jquery or javascript , let me know we can implement with CSS also which is SEO friendly.

BUt to have good effects its better to implement through jquery or javascript , Let me know if you need any help i can provide you all the details.

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DropDown/DropDown.aspx

See if that dropdown works like you want it to. I'm not asking you to use that particular one, I'm asking if that's an effect you like.

A searchable term is "sharepoint dropdownlist" because sharepoint uses this same method to produce themeable dropdowns.