Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Consulta menu vertical

CSS - Consulta menu vertical

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Consulta menu vertical

Publicado por Robokick (21 intervenciones) el 16/05/2021 19:45:17
HOLA CON TODOS PUEDEN INDICARME COMO DEBERIA LA PARTE DONDE COLOCO EL DISPLAY BLOCK POR FAVOR
LA IDEA ES QUE CUANDO PASE EL PUNTERO POR GOOGLE APAREZCA LA OPCION DE MICROSOFT
GRACIAS


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.enlaces > ul{
		display:none;
		}
 
		.link p:hover ul{
		display:block;
		}
 
	</style>
</head>
<body>
<div class="enlaces">
	<p class="link"><a href="http://www.google.com.pe">Google</a>
		<ul>
			<li><a href="http://www.microsoft.com"></a></li>
		</ul>
	</p>
	<p><a href="http://www.hotmail.com">Hotmail</a></p>
	<p><a href="http://www.elpais.com">El País</a></p>
</div>
</body>
</html>
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Consulta menu vertical

Publicado por joel (252 intervenciones) el 17/05/2021 10:51:47
Hola Robokick, la verdad es que no se porque razón con el <p> no funciona, te lo he tenido que cambiar a <div>...

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
<!DOCTYPE html>
<head>
<style>
.link > a:hover ~ ul{
    display:block;
}
ul {
    display:none;
};
 
</style>
</head>
 
<body>
    <div class="enlaces">
        <div class="link">
            <a href="http://www.google.com.pe">Google</a>
            <ul>
                <li><a href="http://www.microsoft.com">Microsoft</a></li>
            </ul>
        </div>
        <p><a href="http://www.hotmail.com">Hotmail</a></p>
	    <p><a href="http://www.elpais.com">El País</a></p>
    </div>
</body>
</html>
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
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Consulta menu vertical

Publicado por Robokick (21 intervenciones) el 17/05/2021 18:46:34
HOLA JOEL
HICE LAS MODIFICACIONES PERO NO SALE COMO DEBE SER NO SE QUE OTRA PROPIEDAD AGREGAR TE ADJUNTO LA IMAGEN Y MI CODIGO COMPLETO

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
<html>
<head>
	<meta charset="UTF-8">
	<title>Menu Vertical</title>
	<link rel="stylesheet" href="archivo.css" type="text/css">
	<style>
		.enlaces a{
		background-color:black;
		color:red;
		padding:1px 5px;
		display:block;
		width:150px;
		text-decoration:none;
		text-align:center;
		}
 
		.enlaces a:hover{
		color:blue;
		background-color:green;
		}
 
		.enlaces p{
		margin:auto;
		}
 
		.link > ul{
		display:none;
		list-style:none;
		}
 
		.link a:hover ~ ul {
		display:block;
 
		}
 
 
	</style>
</head>
<body>
<div class="enlaces">
	<div class="link">
	<a href="http://www.google.com.pe">Google</a>
		<ul>
			<li><a href="http://www.microsoft.com"></a></li>
		</ul>
	</div>
	<p><a href="http://www.hotmail.com">Hotmail</a></p>
	<p><a href="http://www.elpais.com">El País</a></p>
</div>
</body>

A PROVECHO PARA PREGUNTAR TAMBIEN QUE SIGNIFICA EN ESTE CASO COLOCAR LA ~
GRACIAS



vertical
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
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Consulta menu vertical

Publicado por joel (252 intervenciones) el 18/05/2021 08:17:14
El problema que tienes es que tu enlace no tiene contenido...

Tienes puesto esto:
1
<li><a href="http://www.microsoft.com"></a></li>
y esto no muestra nada en pantalla!!!

tienes que poner algo como:
1
<li><a href="http://www.microsoft.com">Microsoft</a></li>
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
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Consulta menu vertical

Publicado por Robokick (21 intervenciones) el 18/05/2021 18:42:31
Joel si no me había dado cuenta, le puse el contenido cuando pasó el puntero por google me muestra microsoft pero cuando el puntero para dar clic a microsoft desaparece dicho submenu

Hay algo que pueda modificar en el style o debería trabajar con lista no ordenadas???
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
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Consulta menu vertical

Publicado por joel (252 intervenciones) el 18/05/2021 20:03:35
Para ello, tienes que hacerlo diferente, en vez de esperar el evento en el <a href... tienes que ejecutar el evento en el <div>... algo así:

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
<!DOCTYPE html>
<head>
<style>
.link:hover > ul{
    display:block;
}
ul {
    display:none;
};
 
</style>
</head>
 
<body>
    <div class="enlaces">
        <div class="link">
            <a href="http://www.google.com.pe">Google</a>
            <ul>
                <li><a href="http://www.microsoft.com">Microsoft</a></li>
            </ul>
        </div>
        <p><a href="http://www.hotmail.com">Hotmail</a></p>
	    <p><a href="http://www.elpais.com">El País</a></p>
    </div>
</body>
</html>
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
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Consulta menu vertical

Publicado por Robokick (21 intervenciones) el 18/05/2021 23:03:40
Gracias Joel ahora si 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