La idea base es eliminar las marcas de los elementos de lista
poniendo
el valor list-style-type:none y hacerlos flotar a la
izquierda.
Para evitar que otros listados hereden los estilos de forma
automática creamos una clase a la que llamamos menu. (Lo
hacemos como clase en lugar de como indicador por si
quisiéramos que en otro punto de la página
apareciera otro listado con las mismas características).
Con este esquema base el resto de reglas se refiere a la apariencia gráfica de los elementos de la lista que sean enlaces: márgenes para separarlos, colores, alineación y bordes esencialmente.
Una vez definidas las características
básicas comunes se especifican las particulares para las
pseudoclases :visited :hover y :active que provocarán los cambios de apariencia visual en función del estado del enlace.
<style type="text/css">
<!--
/* CSS base obtenido de los tutoriales de
www.alsacreations.com/articles */
.menu {
height: 22px; /* necesario para que se produzca salto tras el
menú */
}
.menu ul {
list-style-type: none;
width: 100%; /* ajuste para Opera */
}
.menu li {
float: left;
}
.menu a {
margin: 0 2px;
width: 120px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background-color: #fff;
}
.menu a:visited {
color: rgb(204, 102, 204);
background-color: rgb(221, 221, 221);
}
.menu a:hover {
background-color: rgb(204, 204, 204);
}
.menu a:active {
background-color: gray;
color: #fff;
}
-->
</style>