Código de CSS - Menú horizontal con estilos

<<>>
Imágen de perfil

Menú horizontal con estilosgráfica de visualizaciones


CSS

Publicado el 26 de Julio del 2007 por Administrador (703 códigos)
47.958 visualizaciones desde el 26 de Julio del 2007
Ejemplo de un menú horizontal utilizando únicamente estilos.

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 26 de Julio del 2007gráfica de visualizaciones de la versión: Versión 1
47.959 visualizaciones desde el 26 de Julio del 2007
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!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>



Comentarios sobre la versión: Versión 1 (3)

Arturo Cuauhtémoc
29 de Agosto del 2010
estrellaestrellaestrellaestrellaestrella
Utilicé el código y me dió resultado inmediatamente. Ya habia intentado con otro código, sin éxito. Estoy agradecido.
Responder
syx
16 de Febrero del 2011
estrellaestrellaestrellaestrellaestrella
exelente explicacion, facil y sencillo
Responder
jose
22 de Febrero del 2012
estrellaestrellaestrellaestrellaestrella
muy bueno, muy practico
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s1521