HTML - Creación de menu con submenú

 
Vista:

Creación de menu con submenú

Publicado por Mauricio (3 intervenciones) el 16/06/2021 14:50:30
Buenas. Estaba intentando crear un menú con submenú en mi sitio, y si bien se como hacerlo, en el camino me surgió una duda que tal vez alguno acá pueda ayudarme a resolver.
Cuando uno intenta usar el efecto de que al pasar por sobre una etiqueta (sea img, p, a, button) se muestre otra que se encontraba en "display: none", descubrí que sólo es posible hacerlo si la segunda etiqueta es hija de la primera. Pongo los ejemplos para que se entienda a que me refiero.

1
2
3
4
5
6
<div class="menu">
<a></a>
</div>
 
<div class="subMenu">
</div>

En ese caso, si yo en CSS hago un a; hover para que el display de .subMenu pase de "none" a "block", por ejemplo, no me va a funcionar, pero si hago lo siguiente si:

1
2
3
4
5
<div class="menu">
<a></a>
<div class="subMenu">
</div>
</div>

Alguno entiende porque pasa esto?

Muchas gracias!
Saludos
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: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Creación de menu con submenú

Publicado por joel (460 intervenciones) el 16/06/2021 19:23:35
Hola Mauricio, no te entiendo muy bien... puedes poner el código CSS para probarlo?
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

Creación de menu con submenú

Publicado por Mauricio (3 intervenciones) el 16/06/2021 21:50:50
Si, claro!

1
2
3
4
5
6
7
.subMenu{
display: none;
}
 
.menu a:hover .subMenu{
display: block;
}
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: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Creación de menu con submenú

Publicado por joel (460 intervenciones) el 17/06/2021 08:08:03
Ah, entiendo Mauricio... Al hacer :hover de un elemento, tienes acceso a sus descendientes directos, a sus hermanos y sus descendientes (de los hermanos), pero no puedes ir atrás a un hermano del padre de ese elemento.

La manera de hacerlo, es con javascript... que no se si te interesa, pero seria algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.submenu {
    display: none;
}
</style>
 
<div class="menu">
    <a>aaaaaaaaaa</a>
</div>
<div class="subMenu">contenido</div>
 
<script>
const menu=document.querySelector(".menu");
const subMenu=document.querySelector(".subMenu");
menu.addEventListener("mousemove", () => subMenu.style.display="block");
menu.addEventListener("mouseleave", () => subMenu.style.display="none");
</script>
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

Creación de menu con submenú

Publicado por Mauricio (3 intervenciones) el 17/06/2021 15:40:00
Muchas gracias Joel. Si, no estaba buscando la solución, en realidad lo que quería entender era la dinámica de funcionamiento, cosa que me acabas de explicar a la perfección.

Millones de gracias!!!
saludos
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