Código de CSS - Menu superior con css y html5

Imágen de perfil
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Menu superior con css y html5gráfica de visualizaciones


CSS

Actualizado el 20 de Septiembre del 2018 por Xavi (548 códigos) (Publicado el 24 de Mayo del 2013)
18.550 visualizaciones desde el 24 de Mayo del 2013
Código que muestra como poner un menú superior con estilos, y que se vaya desplegando hasta cuatro niveles al ir pasando el ratón por encima sin utilizar javascript.

menu-superior-con-estilos

Versión 1
estrellaestrellaestrellaestrellaestrella(6)

Publicado el 24 de Mayo del 2013gráfica de visualizaciones de la versión: Versión 1
18.551 visualizaciones desde el 24 de Mayo del 2013
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puede ver el ejemplo de dicho código en: css_menus.html
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        section {clear:both}
        #menu, #menu ul {
            list-style:none;
            padding:0;
            margin:0;
        }
        /* hace referencia a los primeros enlaces */
        #menu li {
            float:left;
            position:relative;
            width: 10em;
        }
        /* hace referencia a los segundos submenus */
        #menu li ul {
            position:absolute;
            display:none;
        }
        /* hace referencia a los terceros submenus */
        #menu li ul li ul {
            margin-top:-2.2em;
            margin-left:10em;
        }
        /* hace referencia a los cuartos submenus */
        #menu li ul li ul li ul {
            margin-top:-2.2em;
            margin-left:10em;
        }
 
        /* hace referencia al formato de los enlaces */
        #menu a {
            display:block;
            border-right:1px solid #fff;
            background:#E0F574;
            color:#3B3B3B;
            text-decoration:none;
            padding:10px;
        }
        /* hace referencia al formato 
           cuando se pasa el raton por encima del enlace */
        #menu a:hover {
            background-color:#5798B4;
            color:#fff;
        }
        /* hace referencia a los bloques de los segundos menus en adelante */
        #menu ul {
            border-top:1px solid #fff;
        }
        /* hace referencia al formato
           del enlaces de los segundos menus en adelante */
        #menu ul a {
            border-right:none;
            border-right:1px solid #fff;
            border-bottom:1px solid #fff;
            border-left:1px solid #fff;
            background:#AEC245;
        }
 
        /* esconde los menus de tercer nivel cuando estamos en el primer nivel */
        #menu li:hover ul ul {
            display:none;
        }
        /* esconde los menus de cuarto nivel cuando estamos en el primer nivel */
        #menu li:hover ul ul ul {
            display:none;
        }
        /* esconde los menus de cuarto nivel cuando estamos en el segundo nivel */
        #menu li ul li:hover ul ul {
            display:none;
        }
        /* muestra los menus de segundo nivel */
        #menu li:hover ul {
            display:block;
        }
        /* muestra los menus de tercer nivel */
        #menu li ul li:hover ul{
            display:block;
        }
        /* muestra los menus de cuarto nivel */
        #menu li ul li ul li:hover ul{
            display:block;
        }
    </style>
</head>
 
<body>
 
    <header>
        <h1>Ejemplo de menus con estilos</h1>
 
        <nav id="menu">
            <li><a href="#" title="Homepage" class="selected">Inicio</a>
                <ul>
                    <li><a href="#" title="Clientes">Clientes</a></li>
                    <li><a href="#" title="Proveedores">Proveedores</a></li>
                </ul>
            </li>
            <li><a href="#" title="Projects">Proyectos</a>
                <ul>
                    <li><a href="#" title="Older projects">Proyectos antiguos</a>
                        <ul>
                            <li><a href="#" title="2010 projects">2010 projects</a></li>
                            <li><a href="#" title="2011 projects">2011 projects</a></li>
                            <li><a href="#" title="2012 projects">2012 projects</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="Proyectos Actuales">Proyectos Actuales</a>
                        <ul>
                            <li><a href="#" title="Ventas">Ventas</a></li>
                            <li><a href="#" title="Producción">Producción</a>
                                <ul>
                                    <li><a href="#" title="Desarrollo">Desarrollo</a></li>
                                    <li><a href="#" title="Almacen">Almacen</a></li>
                                    <li><a href="#" title="Transporte">Transporte</a></li>
                                </ul>
                            </li>
                            <li><a href="#" title="Pendientes">Pendientes</a>
                                <ul>
                                    <li><a href="#" title="Desarrollo">Desarrollo</a></li>
                                    <li><a href="#" title="Almacen">Almacen</a></li>
                                    <li><a href="#" title="Transporte">Transporte</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#" title="Contacto">Contacto</a></li>
            <li><a href="#" title="La Empresa">La Empresa</a></li>
        </nav>
    </header>
 
    <section>
        <article>
            contenido de la pagina
        </article>
    </section>
 
</body>
</html>



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

Ella013
5 de Mayo del 2014
estrellaestrellaestrellaestrellaestrella
Hola, estoy tratando de aprender a hacer menus complicados, y me ha funcionado bastante bien éste, peeeero tengo el siguiente problema:

al cambiar el ancho de cada celda (a un numero menor)
probé con:
#menu li
with: 5em;

pero entonces el último nivel (2010,2011 y 2012projects)
queda separado de su menú superior :S

alguien me podría decir cómo corregir el que no quede separado
para que se pueda seleccionar?

Muchas gracias! ;)
Responder
José H.
19 de Marzo del 2015
estrellaestrellaestrellaestrellaestrella
Excelente post... Particularmente cambiaria los colore!
Responder
Imágen de perfil
20 de Septiembre del 2018
estrellaestrellaestrellaestrellaestrella
¡Que bueno y compatible!. Dando ejemplo.

Muchas gracias
Responder
20 de Septiembre del 2018
estrellaestrellaestrellaestrellaestrella
Muy bueno ...
Responder
Nereyda
21 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
Excelente
Responder
9 de Noviembre del 2018
estrellaestrellaestrellaestrellaestrella
mu bueno y muy bien explicado. tengo una pregunta como hago para centrar el menu en la pagina sin que los submenus se separen?
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/s2383