Se trata de un tutorial realizado por Catalin Rosu en donde ha creado un menú horizontal desplegable con CSS3, sin ningún tipo de código Javascript ni tampoco imágenes.
Menú horizontal desplegable con CSS3
Ejemplo real:


Para hacer este bonito menú te transladas a edición de plantilla y buscas con Ctrl+F la etiqueta ]]></b:skin> y justo encima colocas el CSS:

/* Menú en general */
#menu
{
    width: 100%;
    margin: 0;
    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: 25px;
    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 
{
    color: #fafafa;
}

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

/* Submenús */

#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 
{
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a 
{
    height: 10px;
    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;
}

/* Borrar elementos flotantes */
#menu:after
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

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

Ahora colocas este HTML como elemento HTML/Javascript y listo:

<ul id="menu">
        <li><a href="#">Titulo 1</a></li>
        <li><a href="#">Titulo 2</a>
                <ul>
                      <li><a href="#">Subtitulo 1</a></li>
                      <li><a href="#">Subtitulo 2</a></li>
                      <li><a href="#">Subtitulo 3</a></li>
                      <li><a href="#">Subtitulo 4</a>
                </ul>
        </li>
        <li><a href="#">Titulo 3</a></li>
        <li><a href="#">Titulo 4</a></li>
</ul>

Puedes ir agregando las listas de los títulos y subtítulos de esta forma:

<li><a href="#">Titulo 3</a>
         <ul>
               <li><a href="#">Subtitulo 1</a></li>
               <li><a href="#">Subtitulo 2</a></li>
               <li><a href="#">Subtitulo 3</a></li>
               <li><a href="#">Subtitulo 4</a></li>
         </ul>
</li>
<li><a href="#">Titulo 4</a></li>

Como se puede ver, la estructura del HTML es muy fácil de entender. Espero y lo puedas aplicar en tu blog.

2 Respuestas hasta el momento

  1. pude agregarlo pero sin submenus :/

  2. Oh! me parace bien Emiliano Martin... lo podremos agregar como nos agrade espero verte pronto por aqui saludos!!

Deja un comentario

                                                                                                                                                                                                                                                                                                                                                       

Hola, Bienvenido a Blog 2000!

Puedes seguirnos en las redes sociales o suscribirte al feed.

Blog 2000 Blog 2000 Blog 2000 Blog 2000

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Blog 2000