CSS - Problema con Menu <nav>

   
Vista:

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:

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
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

Problema con Menu <nav>

Publicado por xve (352 intervenciones) el 30/04/2015 07:56:00
Hola Julio, he probado tu código y me ha funcionado perfectamente!! al pulsar sobre el submenu "De viento", el link funciona!!!
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

Problema con Menu <nav>

Publicado por julioReyns (2 intervenciones) el 30/04/2015 13:10:01
Pero el problema que tengo es que cuando clickeo en "Instrumentos" solo funciona el link cuando apreto encima de las letras. Si hago clic en el recuadro de "Instrumentos", no entra en el link.
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

Problema con Menu <nav>

Publicado por jeyson (1 intervención) el 07/05/2015 23:41:37
Prueba con esto cambiando solo el 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
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;
	        /*padding: 10px 20px;*/
	    }
 
	    nav ul a{
	    	padding: 10px 20px;
	    }
	 	nav ul li ul a{
	    	padding: 0px 0px;
	    }
	    nav ul {
	        text-align: left;
	        display: inline;
	        padding: 0px 4px 0px 0px;
	        list-style: none;
	    }
 
	    nav ul li {
	        display: inline-block;
	        margin-right: -4px;
	        position: relative;
	        padding: 10px 0px;
	    }
 
	    nav ul li:hover {
	        background: green;
	    }
 
	    nav ul a:hover {
	        background: green;
	    }
 
	    nav ul a li ul: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;
	    }
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