En este tutorial voy a explicar como crear un menu para nuestra página web usando unicamente las etiquetas ul y li
Estructura del la lista ul li
Nuestro código html es muy sencillo únicamente hay que crear un listado (ul) y agregar los items del listado que sería cada li y todo esto dentro de un div al cual llamaremos menu
<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>Dándole forma al UL con estilos
Si vemos sólo el html veremos un menu vertical bastante alicaido, ahora vamos a hacer que la hoja de estilos se encargue de darle forma:
body {
color: #333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#menu {
margin:auto;
padding-left:20px;
padding-top:5px;
height:25px;
width:320px;
background-image:url(nav_bg.png);
}
#menu ul{
list-style:none; /* Eliminamos los bullets */
margin:0px; /* Quitamos los margenes */
padding:0px; /* Quitamos el padding */
}
#menu ul li {
float:left; /* Hacemos que el menu se muestre horizontal */
padding-left:10px;
padding-right:10px;
border-right:1px solid #FFFFFF;
}
#menu ul li a{
text-decoration:none;
color:#CCCCCC;
font-weight:bold;
}
#menu ul li a:hover{
color:#FFFFFF;
}
Si revisamos el código CSS, vemos que poco a poco defino el fondo, la foma en que mostrarán los items, le aplico colores a los links y va tomando forma nuestro menu.
Si estás buscando un menu con submenus, y menus desplegables, revisa este tutorial
