Question

我正在尝试让我的导航栏下拉菜单在悬停时具有此下滑效果但由于某种原因它不起作用，我所做的是将下拉菜单容器绝对定位在导航栏上方且转换为600ms ，所以当用户将鼠标悬停在链接包装器上时，我将下拉菜单放在包装器旁边，过渡时它应该让人感觉到男人实际上从导航系统中滑落了，但它会立即出现在那里。

.navbar_link_wrapper：hover .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>

Answer 1

我注意到您要转换的元素上有display: none;。

这不起作用。您需要使用其他内容，例如visibility。

例如

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

这是一个有效的fiddle来证明这一点。

无法将我的导航栏下拉列表设置为“幻灯片”

1 个答案: