Menu Horizontal con Css3

Hola!,hola pues aqui traigo nuevamente un menu hecho con css3,pues bien este es aun mas sencillo comparado que el anterior publicado Menu Horizontal Desplegable hecho con CSS3 ,ya que no tiene despliegue de submenus y esas cosas.

Asi que comencemos, pero antes queria darles un ejemplo de este menu , dale clic al siguiente enlace para verlo ---> Menu css3 [Prueba] .

Para poner este menú con css3, entra a la Edición HTML de tu plantilla, y antes de 
]]></b:skin> pega los estilos:

                                                 <!--Menu Horizontal con Css3 -->

#menu {

float:left;
padding:5px 10px;
list-style:none;
margin:0px;
border-radius:10px; /*Para los bordes del menu*/
-moz-border-radius:10px; /*Para los bordes del menu*/
-webkit-border-radius:10px; /*Para los bordes del menu*/
-o-border-radius:10px; /*Para los bordes del menu*/
background:-webkit-linear-gradient(top, #fffdfd, #64666d); /*Fondo del menu*/
background:-moz-linear-gradient(top, #fffdfd, #64666d); /*Fondo del menu*/
background:-o-linear-gradient(top, #fffdfd, #64666d); /*Fondo del menu*/
}

#menu li {
display:inline;
float:left;
}

#menu li a {
float:left;
margin:0;
padding:5px 10px;
color:#333;  /*Color de texto*/
text-decoration:none;
text-shadow:#CCC;  /*Sombra del texto*/
border-radius:10px;  /*Para los bordes del menu al pasar el mouse por encima*/
-moz-border-radius:10px; /*Para los bordes del menu al pasar el mouse por encima*/
-webkit-border-radius:10px; /*Para los bordes del menu al pasar el mouse por encima*/
-o-border-radius:10px; /*Para los bordes del menu al pasar el mouse por encima*/
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
}

#menu li a:hover {
background:-webkit-linear-gradient(top, #64666d, #fffdfd); /*Fondo del menu al pasar el mouse por encima */
background:-moz-linear-gradient(top, #64666d, #fffdfd); /*Fondo del menu al pasar el mouse por encima */
background:-o-linear-gradient(top, #64666d, #fffdfd); /*Fondo del menu al pasar el mouse por encima */
color: #F00;  /* Color de texto al pasar el mouse por encima */
text-shadow:#000;  /* Sombra del texto al pasar el mouse por encima */
}

                                               <!--Menu Horizontal con Css3 -->

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

                                      <!--Menu Horizontal con Css3 [Body]-->
<ul id="menu">
<li><a href="URL del enlace">Menu1</a></li>
<li><a href="URL del enlace">Menu2</a></li>
<li><a href="URL del enlace">Menu3</a></li>
<li><a href="URL del enlace">Menu4</a></li>
</ul>
                                      <!--Menu Horizontal con Css3 [Body]-->

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

*Si quisieras agregar otro Menu solo tienes que agregar antes del código </ul> lo siguiente:

<li><a href="URL del enlace">Menu4</a></li>

Bueno creo que es todo.