Problema con Menu <nav>
Publicado por julioReyns (2 intervenciones) el 30/04/2015 02:52:03
Hola a todos, estoy desde hace varios dias viendo como puedo solucionar el siguiente problema, pero no consigo hacerlo:
Tengo el siguiente codigo HTML:
Y el siguiente CSS:
El problema que tengo es que cuando apreto en uno de los bordes de "Instrumentos" o "Percusion", no me detecta el link, como lo hace con "Home". Ya se, esto se debe a que asi funciona:
Y así no funciona:
Casualmente, "De Viento" y "De Cuerdas" me detecta todo el recuadro como un enlace, porque tengo <a><li></li></a>, pero como puedo hacer para que "Instrumentos" pueda hacerle clic en cualquier borde y entrar al enlace, en lugar de tener que apretar si o si sobre las letras?
Cualquier duda consultenme y agradecidamente les aclaro!
Muchisimas gracias desde ya.
Tengo el siguiente 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
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Pagina Actual.css">
</head>
<body>
<header>
<nav>
<ul>
<a href="#" class="principal"><li>Home</li></a>
<li><a href="#" class="principal">Instrumentos</a>
<ul>
<a href="#"><li>De Viento</li></a>
<a href="#"><li>De Cuerdas</li></a>
</ul>
</li>
<li><a href="#" class="principal">Percusion</a>
<ul>
<a href="#"><li>Bateria</li></a>
<a href="#"><li>Tambor</li></a>
</ul>
</li>
<li><a href="#" class="principal">Profesores</a>
<ul>
<a href="#"><li>De Teoria</li></a>
<a href="#"><li>De Practica</li></a>
</ul>
</li>
<a href="#" class="principal"><li>Eventos</li></a>
<a href="#" class="principal"><li>Contacto</li></a>
</ul>
</nav>
</header>
</body>
</html>
Y el siguiente 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
nav{text-align: left;
background: black; width: 1024px; margin: 0px auto 0px auto; } nav a{text-decoration: none;
color: white;font: bold 17px sans-serif;
} nav ul {text-align: left;
display: inline; padding: 15px 4px 15px 0px;list-style: none;
} nav ul li {display: inline-block;
margin-right: -4px;
position: relative; padding: 10px 20px; }nav ul li:hover {
background: green; } nav ul li ul { padding: 0px; position: absolute; top: 40px; left: 0; width: 150px;box-shadow: none;
visibility: hidden; } nav ul li ul li { background: grey; display: block; }nav ul li ul li:hover {
background: #666;
}nav ul li:hover ul {
visibility: visible; }El problema que tengo es que cuando apreto en uno de los bordes de "Instrumentos" o "Percusion", no me detecta el link, como lo hace con "Home". Ya se, esto se debe a que asi funciona:
1
<a href="#" class="principal"><li>Home</li></a>
Y así no funciona:
1
2
3
4
5
6
<li><a href="#" class="principal">Instrumentos</a>
<ul>
<a href="#"><li>De Viento</li></a>
<a href="#"><li>De Cuerdas</li></a>
</ul>
</li>
Casualmente, "De Viento" y "De Cuerdas" me detecta todo el recuadro como un enlace, porque tengo <a><li></li></a>, pero como puedo hacer para que "Instrumentos" pueda hacerle clic en cualquier borde y entrar al enlace, en lugar de tener que apretar si o si sobre las letras?
Cualquier duda consultenme y agradecidamente les aclaro!
Muchisimas gracias desde ya.
Valora esta pregunta
0
