Menu "Sol y Noche"

comentar


Hoy os traigo este menu diseñado por mi, al que he llamado asi por los colores que he utilizado. Cuando pasas el cursor por encima, los colores del fondo y texto se invierten. Para l@s que os guste este menu tan alegre, o simplemente quede bien en vuestro blog o web y lo querais poner.
Lo primero es ir a la plantilla HTML y antes de ]]></b:skin> añadir los estilos CSS 


ESTILOS

/* Menu sol y noche
   diseño, design: Johnny Vega
   REDEANDO - http://redeando.blogspot.com/
----------------------------------------------- */
 .redeando1 {
 float: left;
 width: 100%;
 margin: 0;
 padding: 0;
 background: url(http://4.bp.blogspot.com/-Zt-66jjm6Kc/TkkSp1kGX7I/AAAAAAAAALA/iLgQ1LiVdTM/s1600/buttonmenu.png);
 font-size: 12px;
 text-decoration: bold;

 }

 .redeando1 li {display: inline;}

 .redeando1 li a, .menujohnny li a:visited {
 float: left;
 padding: 10px;
 text-decoration: none;


 color: #000;
 font-size: 12px;
 font-family: Arial Black;
 border-right: 3px solid #131313;
 border-top: 2px solid #131313;
 border-bottom: 2px solid #131313;
 text-shadow: 5px 1px 5px #fff;


 }

 .redeando1 li a:hover {
 background: transparent url(http://4.bp.blogspot.com/-jkAn4fZFPdE/TkkSv9r5iBI/AAAAAAAAALE/Jz9Lp2C_uoU/s1600/buttonover.png) center center repeat-x;
 font-size: 12px;
 text-decoration: bold;
 color: #FFF545;

 } 

Luego, pegamos el codigo alli donde lo queramos mostrar


CODIGO

<ul class="redeando1">
 <b>

 <li><a href="URL">NOMBRE</a></li>
 <li><a href="URL">NOMBRE</a></li>
 <li><a href="URL">NOMBRE</a></li>
 <li><a href="URL">NOMBRE</a></li>

 </b>

 </ul>

 Sustituimos donde pone URL y NOMBRE por la direccion y titulo del enlace 
y asi nos quedara, guapo ¿no?