<style type="text/css">
<!--
#menu {
font-family: Arial; /*Aquí podemos modificar la tipografía, si eliminamos esta linea la tipografía será la del css de nuestro sitio. */
font-size: 1em; /*El tamaño de la tipografía*/
}
#menu li {
float: left; /* Indicamos que la posición de 'li' sea adjunte siempre a la izquierda */
list-style-type: none; /* Eliminamos las marcas que genera el li como pueden ser las redonadas o recuadros */
}
#menu ul {
margin: 0; /* Por defecto ul genera una separación hacia la derecha. con margin:0 queda anulada */
padding: 0;
}
#menu a {
display: block;
text-decoration: none;
color: #881100; /* El color de la tipografía */
background: #ccc; /* El fondo */
padding: 3px 10px 3px 10px;
text-align: center;
border: 1px solid #6643ff; /* Ancho y borde de el recuadro */
/* Pintamos las lineas de todos los lados, */
border-width: 1px 1px 1px 1px;
}
/* El primer recuadro, no tiene la linea izquierda. Aqui se la colocamos */
#menu a#primero {
border: 1px solid #6643ff;
}
#menu a:hover { /* Al pasar el ratón*/
display: block;
text-decoration: none;
color: #ccc;
background: #881100;
padding: 3px 10px 3px 10px;
text-align: center;
border: 1px solid #6643ff;
border-width: 1px 1px 1px 1px;
}
-->
</style>
<div id="menu">
<ul>
<li><a href="http://yohagoweb.blogspot.com">YoHagoWeb</a></li>
<li><a href="http://webmasters-principiantes.blogspot.com">Bar</a></li>
<li><a href="http://www.aassaapp.com/yohagoweb/fcyhw1.php">Contactar</a></li>
</ul>
</div>
...................... Menú horizontal:
..........................
..........................
menú vertical 1
Menú vertical 2
