Menu horizontal desplegable con CSSIII

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.

Ejemplo real:

• Titulo 1
• Titulo 2
  • Subtitulo 1
  • Subtitulo 2
  • Subtitulo 3
  • Subtitulo 4
• Titulo 3
• Titulo 4

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.