menu desplegable

Como hacer un menú desplegable multinivel usando solo CSS
Tutoriales / HTML & CSS
octubre 23, 2011 / Josue Ochoa
29 Comentarios
Tutorial de: HTML y CSS
Dificultad: Intermedio
Tiempo: 45Minutos
Demo
Descargar
En este tutorial aprenderemos a hacer un sencillo menú desplegable con soporte para infinitos niveles usando HTML y CSS.
Estructura HTML
Trabajaremos con una lista con clase de“nav”, que almacenara los items del menú:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15



Menu desplegable usando solo CSS




Home
Servicios
Acerca
Contacto



Los submenús sedesplegaran cuando el usuario pase el cursor, estos iran como listas dentro de listas(ul > li > ul). Este ejemplo funcionara con cualquier cantidad de submenús, eso quiere decir que puedes incluir losniveles de menús que quieras, en este caso tendremos 3 niveles:
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
4243
44
45
46
47

Home
Servicios

Diseno grafico
Diseno web

Submenu 1
Submenu 2
Submenu 3
Submenu 4
Submenu 5


Marketing

Submenu 1
Submenu 2
Submenu 3

Submenu 1
Submenu 2Submenu 3
Submenu 4




SEO


Acerca

Historia
Mision
Vision


Contacto

Código CSS
Empezaremos con un reset basico y algo de decoración para el menu:
1
2
3
4
5
6
7
8
9
1011
12
13
14
15
16
17
18
19
20
21
22
23
* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
}
.nav li a {background:#0c9ba0;
color:#FFF;
display:block;
border:1px solid;
padding:10px 12px;
}
.nav li a:hover {
background:#0fbfc6;
}
En la linea 9, se especifica que solo los li que sean descendientesdirectos del primer ul tengan float: left, esto es para que solo el menu principal sea horizontal y los submenús se mantengan en vertical:


Por defecto todos los submenús no serán visibles, los...