Método A: Salto de línea con <br />
Manzanas<br />
Leche<br />
Patatas<br />
Chocolate<br />
Durante años hemos podido ver este código en millones de páginas web.
Método B: Etiqueta <li>
<li>Manzanas<br />
<li>Leche<br />
<li>Patatas<br />
<li>Chocolate<br />
Método C: Cerrando etiquetas.
<li>Manzanas</li>
<li>Leche</li>
<li>Patatas</li>
<li>Chocolate</li>
Método D: Código válido.
<ul>
<li>Manzanas</li>
<li>Leche</li>
<li>Patatas</li>
<li>Chocolate</li>
</ul>
Marcado con CSS
Método simple. Algunos navegadores no renderizan bien el código.
ul {
list-style: none;
padding-left: 0;
list-style-image: url(icono.gif);
}
Método alternativo
ul {
list-style: none;
}
li {
background: url (icono.gif) no-repeat 0 50%;
padding-left: 17px;
}
Vista en navegador
Menú de navegación con listas
<ul id="menu" >
<li><a href="manzanas.htm">Manzanas</a></li>
<li><a href="leche.htm">Leche</a></li>
<li><a href="patatas.htm">Patatas</a></li>
<li><a href="chocolate.htm">Chocolate</a></li>
</ul>
Código CSS
#menu {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#menu li {
margin: 0;
padding: 0;
display: inline ;
list-style-type: none;
}
#menu a {
float: left ;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px ;
text-decoration: none ;
color: #9c9 ;
}
#menu a.active, #menu a:hover{
border-bottom: 4px solid #696 ;
padding-bottom: 2px ;
color: #363 ;
}
#menu a:hover{
color: #363 ;
}
Vista en navegador
Código CSS (sombras)
#menu {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#menu li {
margin: 0;
padding: 0;
display: inline ;
list-style-type: none;
}
#menu a {
float: left ;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px ;
text-decoration: none ;
color: #708491;
}
#menu a.active, #menu a:hover{
color: #000;
background: url(fondo.gif) no-repeat bottom center;
}