[aporte] menu desplegable con html y css

[sered]

<ul id="menu"> 
        <li><a href="#">Inicio</a></li> 
        <li> 
                <a href="#">Categorias</a> 
                <ul> 
                        <li><a href="#">pon lo que quieras</a></li> 
                        <li><a href="#">pon lo que quieras</a></li> 
                        <li><a href="#">pon lo que quieras</a></li> 
                        <li><a href="#">pon lo que quieras</a></li> 
                </ul> 
        </li> 
        <li><a href="#">pon lo que quieras</a></li> 
        <li><a href="#">pon lo que quieras</a></li> 
        <li><a href="#">pon lo que quieras</a></li> 
        <li><a href="#">pon lo que quieras</a></li>

Aqui el codigo css

#menu 
{ 
        width: 100%; 
        margin: 10; 
        padding: 10px 0 0 0; 
        list-style: none; 
        background: #111; 
        background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
        background: -webkit-linear-gradient(#444, #111); 
        background: -o-linear-gradient(#444, #111); 
        background: -ms-linear-gradient(#444, #111); 
        background: linear-gradient(#444, #111); 
        -moz-border-radius: 50px; 
        border-radius: 50px; 
        -moz-box-shadow: 0 2px 1px #9c9c9c; 
        -webkit-box-shadow: 0 2px 1px #9c9c9c; 
        box-shadow: 0 2px 1px #9c9c9c; 
} 

#menu li 
{ 
        float: left; 
        padding: 0 0 10px 0; 
        position: relative; 
} 

#menu a 
{ 
        float: left; 
        height: 30px; 
        padding: 0 25px; 
        color: #999; 
        text-transform: uppercase; 
        font: bold 12px/25px Arial, Helvetica; 
        text-decoration: none; 
        text-shadow: 0 1px 0 #000; 
} 

#menu li:hover > a 
{ 
        color: #fafafa; 
} 

*html #menu li a:hover /* IE6 */ 
{ 
        color: #fafafa; 
} 

#menu li:hover > ul 
{ 
        display: block; 
} 

/* Sub-menu */ 

#menu ul 
{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: none; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    z-index: 99999; 
    background: #444; 
    background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
    background: -webkit-linear-gradient(#444, #111); 
    background: -o-linear-gradient(#444, #111); 
    background: -ms-linear-gradient(#444, #111); 
    background: linear-gradient(#444, #111); 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

#menu ul li 
{ 
    float: none; 
    margin: 0; 
    padding: 0; 
    display: block; 
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
} 

#menu ul li:last-child 
{ 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

#menu ul a 
{ 
    padding: 10px; 
        height: auto; 
    line-height: 1; 
    display: block; 
    white-space: nowrap; 
    float: none; 
        text-transform: none; 
} 

*html #menu ul a /* IE6 */ 
{ 
        height: 15px; 
        width: 150px; 
} 

*:first-child+html #menu ul a /* IE7 */ 
{ 
        height: px; 
        width: 150px; 
} 

#menu ul a:hover 
{ 
    background: #0186ba; 
        background: -moz-linear-gradient(#04acec,  #0186ba); 
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
        background: -webkit-linear-gradient(#04acec,  #0186ba); 
        background: -o-linear-gradient(#04acec,  #0186ba); 
        background: -ms-linear-gradient(#04acec,  #0186ba); 
        background: linear-gradient(#04acec,  #0186ba); 
} 

#menu ul li:first-child a 
{ 
    -moz-border-radius: 5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
} 

#menu ul li:first-child a:after 
{ 
    content: ''; 
    position: absolute; 
    left: 30px; 
    top: -8px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 8px solid #444; 
} 

#menu ul li:first-child a:hover:after 
{ 
    border-bottom-color: #04acec; 
} 

#menu ul li:last-child a 
{ 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 
} 

/* Clear floated elements */ 
#menu:after 
{ 
        visibility: hidden; 
        display: block; 
        font-size: 0; 
        content: " "; 
        clear: both; 
        height: 0; 
} 

* html #menu             { zoom: 1; } /* IE6 */ 
*:first-child+html #menu { zoom: 1; } /* IE7 */ 

Otro codigo css distinto al otro

#menu ul li:first-child a:after 
{ 
    content: ''; 
    position: absolute; 
    left: 30px; 
    top: -8px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 8px solid #444; 
} 

#menu ul li:first-child a:hover:after 
{ 
    border-bottom-color: #009; 
} 

[Doodleo]

@sered: Gracias por el aporte, ahí tienes unos puntitos de reputación ;-)

[leiko]

Ami no me sale, es decir, me queda como si fuera una lista, pero no como un menu desplegable, si pudieras explicar como crearlo mejor te lo agradeceria...

[sered]

Ami no me sale, es decir, me queda como si fuera una lista, pero no como un menu desplegable, si pudieras explicar como crearlo mejor te lo agradeceria...

Lo que tienes que hacer esque si usas el dreamweaver para programar simplemente copias este codigo en html entre las etiquetas <body></body> luego en una hoja css copias uno de los estilos y en otra diferente el otro entonces selecionas el codigo html y adjuntas las dos hojas de estilos en cambio con el notepad es diferente.

[Vazquinhos]

lo has hecho tu esto? o simplemente lo has copiado de algun sitio?... es que si lo has hecho tu podrias explicarnos mas o menos porque haces las cosas?? por ejemplo porque haces listas en el html?

Gracias

[SuperHipo]

Sered, fantástico el menu. Muchas gracias por el aporte.

Me pondré a estudiar un poco el código del CSS porque hay algunas cosillas que no conocía.

Lo dicho... Muchas gracias y un saludo!!

[sered]

lo has hecho tu esto? o simplemente lo has copiado de algun sitio?... es que si lo has hecho tu podrias explicarnos mas o menos porque haces las cosas?? por ejemplo porque haces listas en el html?

Gracias

Si lo hice yo y lo hice principalmente porque me gusta programar