Utilizamos cookies propias y de terceros para mejorar la experiencia de navegación, y ofrecer contenidos y publicidad de interés.
Al continuar con la navegación entendemos que se acepta nuestra política de cookies.
Iniciar sesión Cerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta

CSS - Menú horizontal con estilos

<<>>
Titulo:local

Menú horizontal con estilos

Lenguaje:CSS
Ejemplo de un menú horizontal utilizando únicamente estilos.
NOTA: Ver un Ejemplo

<!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>

Escuelas de especialización tecnológica