problema al agregar scroll a segundo nivel de navbar
Publicado por Daniel (2 intervenciones) el 27/10/2022 18:19:50
Tengo un problema, mi barra de navegación desplega un segundo nivel para los tipos de autos, al ser muy larga no cabe en toda la pantalla de algunos dispositivos, agregué un scroll "overflo-y:overlay" y un alto máximo "max-height:500px" y todo iba bien, hasta que ahora ya no se oculta el menú desplegable no se ve pero cuando paso el mouse encima de la parte donde se despliega (no sobre el botón que debería desplegar si no sobre el lugar donde se despliega) aparece el menu, esto impide una correcta navegación en la pagina mi menu deblegable esta compuesto por "ul" y "li", al darle el alto maximo al "ul" es cuando ocurre este error, espero alguien me pueda ayudar y gracias
y estilos
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
<nav class="nav">
<div class="re-central re-nav-color">
<div id="dl-menu" class="re-content dl-menuwrapper">
<div class="logoNav">
<a href="index">
<img src="images/logo-nav.png" alt="logo" href="index" >
</a>
</div>
<button class="dl-trigger" aria-label="Menú móvil"><span></span></button>
<ul class="re-ul-principal dl-menu">
<li><a href="index"><div><p>Inicio</p></div></a></li>
<li><a href="#"><div><p>Autos</p></div></a>
<?php if(mysqli_num_rows($resTpro)>0):?>
<ul class="dl-submenu">
<div>
<?php while($regTpro = mysqli_fetch_assoc($resTpro)):?>
<li><a href="autos/<?=$regTpro['idtipo']?>-<?=sustbURLFriend($regTpro['nomtipo'])?>">
<div><p><?=$regTpro['nomtipo']?></p></div></a>
</li>
<?php endwhile;?>
</div>
</ul>
</li>
<?php endif;?>
<li><a href="vende-tu-auto"><div><p>Vende tu auto</p></div></a></li>
<li><a href="resenas"><div><p>Reseñas</p></div></a></li>
<li><a href="financiamiento"><div><p>Financiamiento</p></div></a></li>
<li><a href="nosotros"><div><p>Nosotros</p></div></a></li>
<li><a href="contacto"><div><p>Contacto</p></div></a></li>
</ul>
</div>
</div>
</nav>
y estilos
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ul.re-ul-principal li ul.dl-submenu{ /*ul del 2º nivel*/
width: 250%;
position: absolute; top: 50px;left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
font-weight: 400;
text-transform: none;
text-align: center;
/*error*/max-height: 500px;
overflow-y: overlay;
}Valora esta pregunta
0
