<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title>Menu horizontal con estilos utilizando 'ul' y 'li'</title>
<style type="text/css">
<!--
#menu {
font-family: Arial;
font-size: 0.8em;
}
#menu li {
/* Indicamos que la posición de 'li' sea adjunte siempre a la izquierda */
float: left;
/* Eliminamos las marcas que genera el li como pueden ser las redonadas o recuadros */
list-style-type: none;
}
/* Por defecto ul genera una separación hacia la derecha. con margin:0 queda anulada */
#menu ul {
margin: 0;
padding: 0;
}
#menu a {
display: block;
text-decoration: none;
color: #6643ff;
background: #f0edff;
padding: 3px 10px 3px 10px;
text-align: center;
border: 1px solid #6643ff;
/* Pintamos las lineas de todos los lados, excepto el izquierdo */
border-width: 1px 1px 1px 0;
}
/* El primer recuadro, no tiene la linea izquierda. Aqui se la colocamos */
#menu a#primero {
border: 1px solid #6643ff;
}
#menu a:hover {
background: #d6ccff;
}
-->
</style>
</head>
<body>
<h1 style="font-size:1em">Menu horizontal con estilos utilizando 'ul' y 'li'</h1>
<div id="menu">
<ul>
<li><a href="#" id="primero">Cursos</a></li>
<li><a href="#">Temas</a></li>
<li><a href="#">Codigo</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Contactar</a></li>
</ul>
</div>
<br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>
</body>
</html>
Crear cuenta