How to do drop-down box like "More action" in gmail

I see the "More Action" drop-down box in gmail inbox page. It has levels and some disabled item in the list.

How to do that in HTML+CSS?

Thank you


You can group and disable elements in an HTML <select> element without resorting to the use of JavaScript. Something like the following should work:

<select name="foo">
    <optgroup label="Odds">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5">5</option>
    <optgroup label="Evens">
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="6" disabled="disabled">6</option>

A brief inspection in Firebug shows that Google are faking their drop-down box with a whole bunch of HTML and some clever CSS. Personally, I think taking the "correct" approach and styling it to look prettier is a lot more readable than reinventing the wheel here.

In response to Rob, the reason not to use disabled is IE.

The reason why this is not a good idea is that IE still does not support this in IE6, IE7 or IE8.

I'v been searching for something similar and this is my solution. You'll need icons to show/hide, add css and javascript (jquery in this example). It show/hide a menu but could be anything inside .hide div.


.shortasc { background: url("/css/asc.gif") no-repeat 50% 50%;cursor:pointer;}
.shortdesc { background: url("/css/desc.gif") no-repeat 50% 50%;cursor:pointer;}
.hide{ display:none;}
.toggle-menu .title {

.toggle-menu div.more{
   position: absolute;
   border:#999999 1px solid;

.toggle-menu div.more ul{margin:0; padding:2px; text-align:left;}
.toggle-menu div.more ul li{list-style:none; padding:2px; border:#CCCCCC 1px solid;}

html wich call to a jquery function:

<span class="toggle-menu">
<span class="title" onclick="$(this).win('togglewin');">titulo del menu</span><span class="orden shortasc">&nbsp;&nbsp;&nbsp;</span>
<div class="more hide">
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>and so on</li>

add method to jquery function or edit to add onClick event in title or create your function, or whatever, this is an example with an jquery function

(function($) {
var methods={
//... your functions
   var p = $(this).position();
  var parent = (this).closest('.toggle-menu');
     parent.find('.more').slideDown().offset( {,left:p.left } );
 return this;

$ = function(method) { 
  if ( methods[method] ) {
    return methods[ method ].apply( this, arguments, 1 ));
  } else if ( typeof method === 'object' || ! method ) {
    return methods.init.apply( this, arguments );
  } else {
   $.error( 'Method ' +  method + ' inexistente en' );


Sorry, I can't upload images, but I like the result.

Need Your Help

How to plot a mosaic plot from pre-calculated count data?

r import plot

I would like to create a simple mosaic plot from the data file below: