Menu Desplegable
Publicado por Paco (2 intervenciones) el 26/01/2017 07:54:32
Buenos días gente.
Estoy haciendo una página web para mejorar en HTML y tengo un pequeño problema con el menú.
El problema es que aunque no pase el raton por la sección que quiero se despega el menú solo y al Hacer eso hay texto que no puedo leer o no me puedo loguear ni nada.
Este es el codigo HTML:
Y este el código CSS:
Espero haberme explicado bien, sino decídmelo e intentaré ser mas claro.
Muchas gracias.
Saludos
Estoy haciendo una página web para mejorar en HTML y tengo un pequeño problema con el menú.
El problema es que aunque no pase el raton por la sección que quiero se despega el menú solo y al Hacer eso hay texto que no puedo leer o no me puedo loguear ni nada.
Este es el 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
<header>
<ul>
<li><a href="inicio.html">Inicio</a></li>
<li><a href="historia.html">Historia <span class="fa fa-angle-down"></span></a>
<ul>
<li><a href="malagaFenicia.html">Malaga Fenicia</a></li>
<li><a href="inicio.html">Malaga Romana</a></li>
<li><a href="inicio.html">Malaga Arabe</a></li>
<li><a href="inicio.html">Malaga siglo 19 y 20</a></li>
<li><a href="inicio.html">Actualidad</a></li>
</ul>
</li>
<li><a href="inicio.html">Zonas Culturales<span class="fa fa-angle-down"></span></a>
<ul>
<li><a href="malagaFenicia.html">Museos</a></li>
<li><a href="inicio.html">La catedral de Malaga</a></li>
<li><a href="inicio.html">Malaga Arabe</a></li>
<li><a href="inicio.html">Alcazaba</a></li>
</ul>
</li>
<li><a href="inicio.html">Zonas de Ocio<span class="fa fa-angle-down"></span></a>
<ul>
<li><a href="malagaFenicia.html">Plaza mayor</a></li>
<li><a href="inicio.html">Centro de Malaga</a></li>
<li><a href="inicio.html">Muelle 1</a></li>
<li><a href="inicio.html">Los Alamos</a></li>
<li><a href="inicio.html">Puerto Marina</a></li>
</ul>
</li>
<li><a href="inicio.html">Economía<span class="fa fa-angle-down"></span></a>
<ul>
<li><a href="malagaFenicia.html">Parque tecnologico</a></li>
<li><a href="inicio.html">Agricultura y ganaderia</a></li>
<li><a href="inicio.html">Pesca</a></li>
<li><a href="inicio.html">Turismo</a></li>
<li><a href="inicio.html">Industria</a></li>
</ul>
</li>
<li><a href="inicio.html">Deportes<span class="fa fa-angle-down"></span></a>
<ul>
<li><a href="malagaFenicia.html">Futbol</a></li>
<li><a href="inicio.html">Baloncesto</a></li>
<li><a href="inicio.html">Balonmano</a></li>
<li><a href="inicio.html">Otros</a></li>
</ul>
</li>
<li><a href="inicio.html">Acerca de Nosotros</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="login.html">Registro</a></li>
</ul>
</header>
Y este el código 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
*{
padding: 0; margin: 0;font-family: "Open Sans";
}body {background-image: url('imagenes/fondo.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}header{width: 100%;
background: #010000;
display: flex;justify-content: center;
}header ul{ display: flex;list-style: none;
}header ul li a{ display: block; padding: 20px 20px; color:white;text-decoration: none;
}header ul ul{ position: absolute; top: 50px; display: block;background:#010000;
transform: translateY(0%);
opacity: 0;transition: all .2s;
color: white;}header ul li aspan{transition: all .2s;
}header ul li a:hover span{
transform: translateY(10px);
opacity:0;}header ul li:hover ul{
opacity: 1;transform: translateY(1%);
}Espero haberme explicado bien, sino decídmelo e intentaré ser mas claro.
Muchas gracias.
Saludos
Valora esta pregunta
0
