HTML - Menu Desplegable Vertical Constante, Ayuda HTML CSS

   
Vista:

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:

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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Menu Desplegable Vertical Constante, Ayuda HTML CSS

Publicado por xve (1178 intervenciones) el 05/01/2016 15:26:22
Hola Wasp, he probado tu código, y únicamente me aparecen 4 opciones del nivel 1, pero no me aparecen el resto de opciones, ni pasando el ratón por encima ni pulsando...

Puede que falte algo de código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Menu Desplegable Vertical Constante, Ayuda HTML CSS

Publicado por Wasp (21 intervenciones) el 07/01/2016 10:05:39
Pues la verdad es que no pero vuelvo a poner todo el codigo a ver si faltaba algo, se me hace raro porque como se ve en las fotos es tal cual me sale y no veo que puede pasar.
¿Solo te aparece el menu primero y no se te mueve a los submenus?
Te mando de nuevo todo a ver si ahora si:

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link href="css/estilos4.css" rel="stylesheet" type="text/css" />
	<title>Gestión</title>
</head>
<body>
	<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="recursosv3.jsp">Gestión de Recursos</a>
						<ul id="lista3">
							<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="tercera"><a href="recursosv3.jsp" >Gestión de SubNaturalezas</a>
						<ul>
							<li class="cuarta"><a href="gsubNCreacion.jsp">Creación2</a></li>
							<li class="cuarta"><a href="gsubNConsulta.jsp">Consulta</a></li>
							<li class="cuarta"><a href="gsubNEdicion.jsp">Edición</a></li>
						</ul>
					</li>
 
 
					<li class="quinta"><a href="recursosv3.jsp" >Gestión de Grupos SubNaturalezas</a>
						<ul>
							<li class="sexta"><a href="ggrpSubNCreacion.jsp">Creación3</a></li>
							<li class="sexta"><a href="ggrpSubNConsulta.jsp">Consulta</a></li>
							<li class="sexta"><a href="ggrpSubNEdicion.jsp">Edición</a></li>
						</ul>
					</li>
 
					<li class="septima"><a href="recursosv3.jsp" >Gestión de Parámetros</a>
						<ul>
							<li class="octava"><a href="gpCreacion.jsp">Creación4</a></li>
							<li class="octava"><a href="gpConsulta.jsp">Consulta</a></li>
							<li class="octava"><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>
 
</body>
</html>


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
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;
}
 
#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;
}
 
/* Tamaño lista 2 */
/**
#lista2 ul.segunda{
	display: none;
	list-style: none;
	padding: 0px;
	margin: 0px;
	width: 100px;
}
*/
 
/* 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;
}
 
/* Tamaño lista 3 */
#lista3 ul{
	list-style: none; /*quita los subrayados*/
	padding: 0px;
	margin: 0px;
	width: 80px;
}
 
#lista3 li a:hover{
	display: none;
}

El css lo tengo separado del codigo es un estilos4.css

Ante todo muchas gracias por responder, espero que ahora lo puedas ver.

Muchísimas gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar