Я пытаюсь, чтобы в моих выпадающих меню навигационной панели был этот эффект понижения при наведении, но по какой-то причине он не работает, я имею в виду, что контейнер выпадающего меню расположен абсолютно над навигационной панелью и с переходом 600 мс поэтому, когда пользователь наводит курсор на обертку ссылки, я помещаю раскрывающийся список справа под оберткой, при переходе это должно вызывать ощущение, что мужчины фактически скатываются с навигационной панели, но вместо этого он сразу появляется.
.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>