Un menú sencillo sin Javascript
Un menú se compone de dos partes. Una parte en html, y una en css.
o Uno o Dos o Tres o Cuatro
Uno
</li> Dos
</li> Tres
</li> Cuatro
</li> es la etiqueta que señala una lista. Y </li> es la etiqueta para cado elemento de esta lista. Es importante comprender como una lista está "construida" en html.
ahora el mismo menu con los enlace hacia alguna pagina.
o Uno o Dos o Tres o Cuatro
<a href="
http://alp2.clan.su " target="_blank">
Uno </a>
</li> <a href="
http://file-sharing.clan.su " target="_blank">
Dos </a>
</li> <a href="
http://google.com.ar " target="_blank">
Tres </a>
</li> <a href="
http://youtube.com " target="_blank">
Cuatro </a>
</li> La etiqueta <a></a> señala un enlace. Y target="_blank" señala que el enlace se abrirá en una nueva pestaña.
Si queres poner varios menu en la misma pagina, tienes que darle un nombre a cada menu:
<ul id="menu1 "> <a href="http://alp2.clan.su " target="_blank">Uno </a></li> <a href="http://file-sharing.clan.su " target="_blank">Dos </a></li> <a href="http://google.com.ar " target="_blank">Tres </a></li> <a href="http://youtube.com " target="_blank">Cuatro </a></li>
SI PONES OTRO:
<ul id="menu2 "> <a href="http://alp2.clan.su " target="_blank">Uno </a></li> <a href="http://file-sharing.clan.su " target="_blank">Dos </a></li> <a href="http://google.com.ar " target="_blank">Tres </a></li> <a href="http://youtube.com " target="_blank">Cuatro </a></li>
Cuando pases el mouse por arriba el texto cambia de color, para cambiar el color de el texto esta puesto en color azul.
<ul id="menu1"> <a href="http://file-sharing.clan.su " target="_blank">Dos </a></li> <style type="text/css"> <!-- #menu1 {display:table; padding:0; margin:0px auto; list-style:none; white-space:nowrap;} #menu1 li {display:table-cell; margin:0; padding:0;} #menu1 li a {text-decoration:none; color:#ff530a ; } #menu1 li a:hover { color:#000000 ;} --> </style>
VER COMO QUEDA
Este es el menu mas completo que tiene como una celda y adentro el texto, Cuando pases el mouse por arriba el texto y la celda pueden cambiar de color, para cambiar el color de la celda esta puesto en color rojo y de el texto en azul.
<ul id="menu7 "> <a href="http://alp2.clan.su " target="_blank">Uno </a></li> <a href="http://file-sharing.clan.su " target="_blank">Dos </a></li> <a href="http://google.com.ar " target="_blank">Tres </a></li> <a href="http://youtube.com " target="_blank">Cuatro </a></li> <style type="text/css"> <!-- #menu7 {display:table; padding:0; margin:0px auto; list-style:none; white-space:nowrap;} #menu7 li {display:table-cell; margin:0; padding:0;} #menu7 li a {float:left; font-size:100%; height:290%; line-height:290%; letter-spacing:1px; margin: 0; padding:0px 15px; text-decoration:none; color:#CD3333 ; background-color:#000000 ; border: 2px solid #FFFFFF; } #menu7 li a:hover { color:#000000 ; background-color: #CD3333 ;} --> </style>
VER COMO QUEDA
NOTA: Les recomiendo que practiquen con el bloc de notas, copien el codigo y lo pegan el bloc de notas luego lo guardan con un nombre.html