Menu Horizontal Desplegable hecho con CSS3

Aqui traigo un menú tipo horizontal hecho con css3 , navegando por google estuve investigando sobre menus hechos con css3 ,pues aqui les traigo uno bastante sencillo.

Pueden ver un ejemplo de este dando clic Aqui 

Pues solo tenemos que ir a Plantillas | Edición de Html | Continuar

Pegamos los siguientes estilos justo antes de ]]></b:skin> :

ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#b8b8b8;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 0px 0px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
*display:inline;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 13px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:7px 10px 7px 10px;background-color:#b1b1b1;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:center;padding:4px;background-color:#b8b8b8;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:12px Tahoma;color:#ffffff;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#00aaff;border-color:#C0C0C0;border-style:solid;color:#ff0000;text-decoration:underline;text-shadow:#FFF 0 0 1px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-position:0 100px;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#b8b8b8;background-image:none;color:#ff0000;text-decoration:underline;}
ul#css3menu1 li.topfirst>a{
border-radius:0px 0 0 0px;-moz-border-radius:0px 0 0 0px;-webkit-border-radius:0px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
border-radius:0 0px 0px 0;-moz-border-radius:0 0px 0px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;}
-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.

Ahora vamos a Diseño y agregamos un Elemento | Html/Javascript para pegar la estructura:

<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="URL del Enlace" title="Pestaña 1" style="width:127px;height:19px;line-height:19px;">Pestaña 1</a></li>

<li class="topmenu"><a href="URL del Enlace" title=" Pestaña 2 " style="width:127px;height:19px;line-height:19px;"><span> Pestaña 2 </span></a>
  <ul>
        <li><a href="URL del Enlace" target="_blank" title=" SubPestaña 1"> SubPestaña 1</a></li>
   </ul></li>

<li class="toplast"><a href="URL del Enlace" target="_blank" title=" Pestaña 3 " style="width:127px;height:19px;line-height:19px;"> Pestaña 3</a></li>

</ul>


-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.

*Agrega las URLs de los enlaces donde se indica así como el nombre de tus pestañas.

*Si quisieras agregar otra Pestaña solo tienes que agregar antes del código </ul> lo siguiente:

<li class="toplast"><a href=" URL del Enlace " target="_blank" title="Pestaña4" style="width:127px;height:19px;line-height:19px;">Pestaña4</a></li>

______________________________

*Para agregar otra SubPestaña solo agregamos un trozo de codigo como este antes del </li> de la Pestaña.
<ul>
 <li><a href="URL del Enlace" target="_blank" title=" SubPestaña 1"> SubPestaña 1</a></li>
</ul>

                                                    ______________________________

*Tambien puedes cambiar el tamaño de las Pestañas solamente editando los numeros de los códigos que estan en gris:

Ejemplo: Original
style="width:127px;height:19px;line-height:19px;">

Editado :
style="width:157px;height:21px;line-height:21px;">

______________________________

*Importante: recomiendo no poner muchas pestañas, ya que si se excede entonces las pestañas se mostrarán en un segundo renglón.

Eso es Todo