时间戳

首页 > 解决方案 > 无法让我的导航栏下拉菜单“滑动”

html - 无法让我的导航栏下拉菜单“滑动”

问题描述

我试图让我的导航栏下拉菜单在悬停时产生这种向下滑动的效果，但由于某种原因它不起作用，我所做的是让下拉菜单容器绝对定位在导航栏上方并且过渡时间为 600 毫秒，所以当用户将鼠标悬停在链接包装器上 我将下拉菜单放在包装器的正下方，通过过渡它应该给人一种男人实际上从导航滑下来的感觉，但它只是立即出现在那里。

.navbar_link_wrapper:悬停 .navbar_sublinks_container{display:flex; 顶部：100%；}

这是我的完整代码：

.navbar_maincontainer{width:100%; height:50px; background-color:var(--main_color); display:flex; align-items:center; padding:0px 100px;  font-family:Open Sans; font-size:17px;}

.navbar_link_wrapper{width:auto; height:100%; position:relative; }

.navbar_link{color:white; font-size:17px; width:100%; height:100%; display:flex; justify-content:center; align-items:center; padding:0px 30px;}

.navbar_link_wrapper:hover{background-color:var(--main_color_shade);}

.active{background-color:var(--main_color_shade);}

.active_sub{background-color:rgba(0,0,0,0.3);}

.navbar_sublinks_container{position:absolute; box-shadow:4px 4px 4px rgba(0,0,0,0.2); width:300px; height:auto; left:0px; top:-700px; transition:all 600ms ease; background-color:#383838; z-index:9999999999; display:none; flex-direction:column;}

.navbar_sublink{padding:0px 15px; height:50px; display:flex; align-items:center; transition:all 600ms ease; color:rgba(255,255,255,0.8); font-size:14px; font-weight:400;}

.navbar_sublink:hover{background-color:rgba(0,0,0,0.3);}

.navbar_sublinks_line{width:100%; border-bottom:1px solid rgba(255,255,255,0.1); height:1px; margin:0 auto;}

.navbar_sublinks_container2{width:100%; height:auto; padding:15px; display:flex; flex-direction:column; align-items: flex-start;}

.navbar_sublinks_title{padding:10px 0px; width:100%; color:white; font-size:13px;}

.navbar_sublink2{ padding:10px 15px; color:rgba(255,255,255,0.8); display:flex; align-items:center; font-size:13px; font-weight:300;}

.navbar_sublink2:hover{color:var(--main_color);}

.navbar_link_wrapper:hover .navbar_sublinks_container{display:flex;  top:100%;}
<div class="navbar_maincontainer" style="">
    <div class="navbar_link_wrapper {{ $pageInfo['menu_active']=='Inicio' ? 'active' : '' }}">
        <a class="navbar_link" href="/" style="" title="Página de inicio">Inicio</a>
    </div>
    <div class="navbar_link_wrapper {{ $pageInfo['menu_active']=='Clases' ? 'active' : '' }}" style="margin-left:auto;">
        <a class="navbar_link" href="/clases" style="" title="Nuestros paquetes de adiestramiento canino en Málaga">Servicios</a>
        <div class="navbar_sublinks_container" style=" ">
            <a class="navbar_sublink @if($pageInfo['submenu_active']=='Clases a domicilio')active_sub @endif" href="/clases/domicilio" style="">Clases a domicilio</a>
            <a class="navbar_sublink @if($pageInfo['submenu_active']=='Clases en grupo')active_sub @endif" href="/clases/grupo" style="">Clases en grupo</a>
            <a class="navbar_sublink @if($pageInfo['submenu_active']=='Clases a cachorros')active_sub @endif" href="/clases/cachorros" style="">Clases para cachorros</a>
            <div class="navbar_sublinks_line" style=""></div>
		    <a class="navbar_sublink @if($pageInfo['submenu_active']=='Obediencia')active_sub @endif" href="/conductas/obediencia" style="">Obediencia</a>
			<a class="navbar_sublink @if($pageInfo['submenu_active']=='Ansiedad')active_sub @endif" href="/conductas/ansiedad" style="">Ansiedad</a>
			<a class="navbar_sublink @if($pageInfo['submenu_active']=='Agresividad')active_sub @endif" href="/conductas/agresividad" style="">Agresividad</a>
			<a class="navbar_sublink @if($pageInfo['submenu_active']=='Miedo')active_sub @endif" href="/conductas/miedo" style="">Miedo</a>
			<a class="navbar_sublink @if($pageInfo['submenu_active']=='Hiperactividad')active_sub @endif" href="/conductas/hiperactividad" style="">Hiperactividad</a>
			<a class="navbar_sublink @if($pageInfo['submenu_active']=='Ladridos')active_sub @endif" href="/conductas/ladridos" style="">Ladridos</a>
        </div>
    </div>
    <div class="navbar_link_wrapper @if($pageInfo['menu_active']=='Quienes somos')active @endif" style="">
        <a class="navbar_link" href="/quienes-somos" style="" title="Conoce al grupo Costadog">Quienes somos</a>
    </div>
    <div class="navbar_link_wrapper @if($pageInfo['menu_active']=='Formate con nosotros')active @endif">
        <a class="navbar_link" href="/formate-con-nosotros" title="Conviertete en adiestrador canino">Formate con nosotros</a>
        <div class="navbar_sublinks_container">
            <a class="navbar_sublink @if($pageInfo['submenu_active']=='Formación básica')active_sub @endif" href="/formate-con-nosotros/formacion-basica">Formación básica</a>
            <a class="navbar_sublink @if($pageInfo['submenu_active']=='Formación avanzada')active_sub @endif" href="/formate-con-nosotros/formacion-avanzada">Formación avanzada</a>
        </div>
	</div>
    <div class="navbar_link_wrapper @if($pageInfo['menu_active']=='Contactar')active @endif">
        <a class="navbar_link" href="/contactar" style="" title="Ponte en contacto con nuestros entrenadores expertos">Contactar</a>
		
    </div>
	<div class="navbar_link_wrapper @if($pageInfo['menu_active']=='Testimonios')active @endif">
        <a class="navbar_link" href="/testimonios-de-nuestros-clientes" title="Testimonios de nuestros clientes">Testimonios</a>
    </div>
    <div class="navbar_link_wrapper @if($pageInfo['menu_active']=='Preguntas')active @endif">
        <a class="navbar_link" href="/preguntas-y-respuestas" title="Preguntas y respuestas frecuentes">Preguntas</a>
    </div>
</div>

标签： htmlcssnavbar

解决方案

我注意到你有display: none;你试图过渡的元素。

这行不通。您将需要使用其他类似visibility.

例如。

.navbar_sublinks_container {
    ...
    visibility: hidden;
    transition: all 600ms ease;
}

这是一个证明这一点的工作小提琴。

推荐阅读