Menu Desplegable Vertical Constante, Ayuda HTML CSS
Publicado por Wasp (21 intervenciones) el 05/01/2016 12:43:25
Buenas a todos:
llevo 2 dias para un menu tontorron pero no se me queda bien, os paso el codigo html y el codigo css y las fotos.
Mi menu tiene 4 apartados y cada uno de ellos tiene a su vez 3 subapartados.
El ultimo subapartado se me queda constante arriba y no logro quitarlo, a ver si alguien me podria ayudar, y de paso saber como quitarlo de ahi aplicando el hover.
Codigo html:
Codigo css:
Añado un par de fotos para que se vea el fallo.
Como se puede ver el subapartado Creacion 4 no deberia de ir ahi ni tampoco que saliera reflejado, deberia de salir solo cuando voy al ultimo apartado.
Me gustaria quitarlo el echo de que este constante y que me saliera bien cuando voy pasando por cada apartado el subparametro a mi derecha.
Como se puede ver en Gestion Parametros cuando paso el cursos si que me sale bien el subapartado.
Muchisima gracias.
llevo 2 dias para un menu tontorron pero no se me queda bien, os paso el codigo html y el codigo css y las fotos.
Mi menu tiene 4 apartados y cada uno de ellos tiene a su vez 3 subapartados.
El ultimo subapartado se me queda constante arriba y no logro quitarlo, a ver si alguien me podria ayudar, y de paso saber como quitarlo de ahi aplicando el hover.
Codigo 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
<div id="menu">
<ul id="lista1">
<li class="nivel1 primera"><a href="#" class="nivel1">Gestión de Recursos Padre</a>
<ul id="lista2">
<li class="primera"><a href="recur.jsp">Gestión de Recursos</a>
<ul>
<li class="segunda"><a href="grCreacion.jsp">Creación1</a></li>
<li class="segunda"><a href="grConsulta.jsp">Consulta</a></li>
<li class="segunda"><a href="grEdicion.jsp">Edición</a></li>
</ul>
</li>
<li class="primera"><a href="recurs.jsp" >Gestión de SubNaturalezas</a>
<ul>
<li class="segunda"><a href="gsubNCreacion.jsp">Creación2</a></li>
<li class="segunda"><a href="gsubNConsulta.jsp">Consulta</a></li>
<li class="segunda"><a href="gsubNEdicion.jsp">Edición</a></li>
</ul>
</li>
<li class="primera"><a href="recur.jsp" >Gestión de Grupos SubNaturalezas</a>
<ul>
<li class="segunda"><a href="ggrpSubNCreacion.jsp">Creación3</a></li>
<li class="segunda"><a href="ggrpSubNConsulta.jsp">Consulta</a></li>
<li class="segunda"><a href="ggrpSubNEdicion.jsp">Edición</a></li>
</ul>
</li>
<li class="primera"><a href="recurs.jsp" >Gestión de Parámetros</a>
<ul>
<li class="segunda"><a href="gpCreacion.jsp">Creación4</a></li>
<li class="segunda"><a href="gpConsulta.jsp">Consulta</a></li>
<li class="segunda"><a href="gpEdicion.jsp">Edición</a></li>
</ul>
</li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Gestión de Productos</a>
<ul>
<li class="primera"><a href="#">Opción 2.1</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Gestión de Aprovisionamiento</a>
<ul>
<li class="primera"><a href="#">Opción 3.1</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Gestión de Ofertas</a>
<ul>
<li class="primera"><a href="#">Opción 4.1</a></li>
</ul>
</li>
</ul>
</div>
Codigo css:
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
body{}h1{text-align: center;
}h2{text-align: center;
color: #FF0000;
}#form1{
background-color: #c0c0c0
}/* Tamaño menu y lista 1 */#menu ul, #lista1 ul{
list-style: none;
padding: 0px; margin: 0px; width: 162px;}/* Tamaño lista 2 */#lista2 ul{
list-style: none; /*quita los subrayados*/
padding: 0px; margin: 0px; width: 100px;}#menu li a{
display: block;text-decoration: none;
padding: 5px 15px;background-color: #399;
color: #fff;
}/* Borde superior de la primera pestaña */#menu ul li.primera {
border-top: solid 1px #FFF;
}#lista1 ul{
display: none;}#lista1 a{
display: block;text-decoration: none;
color: #fff; /* Color del texto */
background-color: #399; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
/**
* Tamaño entre celdas
*/ padding: 8px; position: relative;}#lista1 :hover{
position: relative;background-color: #6CC; /* Cambio de color de las celdas cuando pasas el mouse sobre ellas */
color: #000; /* Color de texto al pasar el mouse */
}/* Menu y Submenu */#lista1 a:hover ul, #lista1 :hover ul{
display: block; position: absolute; /**
* Separación entre lo que el menu y el submenu
*/ left: 162px;top:-1px!important; /* Con esto, hacemos que el submenu se quede al mismo nivel que el menu */
top: -31px;
}#lista2 ul{
display: none;}/* Submenu y siguiente Submenu */#lista2 a:hover ul, #lista2 :hover ul{
display: block; position: absolute; /**
* Separación entre lo que el menu y el submenu
*/ left: 162px;top:-1px!important; /* Con esto, hacemos que el submenu se quede al mismo nivel que el menu */
top: -31px;
}#lista3.segunda a{
width: 80px; left: 55px;background-color: #0000ff; /* Color de fondo subpestañas */
color: #000000; /* Color de texto subpestañas */
top:-1px!important;
top: -31px;
}#lista3.segunda a:hover{
position: relative;background-color: #00ffff; /* Cambio de color de las celdas cuando pasas el mouse sobre ellas */
color: #000000; /* Color de texto al pasar el mouse */
}Añado un par de fotos para que se vea el fallo.
Como se puede ver el subapartado Creacion 4 no deberia de ir ahi ni tampoco que saliera reflejado, deberia de salir solo cuando voy al ultimo apartado.
Me gustaria quitarlo el echo de que este constante y que me saliera bien cuando voy pasando por cada apartado el subparametro a mi derecha.
Como se puede ver en Gestion Parametros cuando paso el cursos si que me sale bien el subapartado.
Muchisima gracias.
- DosImagenes.zip(18,8 KB)
Valora esta pregunta
0
