He creado un menú desplazable vertical que incluirá muchas categorías principales.
Cuando alguien pasa el mouse sobre una categoría principal, le mostrará un submenú. Quiero que este submenú tenga la misma altura que la categoría principal.
Pero cuando se desplaza el menú principal, el submenú supera la altura. ¿Se hace de forma que no se sobrepase la altura y se bloquee por abajo?
Te envío unas imágenes para que entiendas el problema.
correcto correcto
Ahora algunas imágenes cuando se desplaza el menú principal
mal mal

Mi código twig-html es:

 <div class="dd_menu"> <ul class="nav-main"> {% for item in menuProducts.items %} <li class="nav-main-item {{ item.classes|join(' ') }}"> {% set term = Term(item.object_id) %} <div class="submenu__image"></div> <a class="dd_menu_a" href="{{ item.link }}">{{ item.title }} <i class="fa fa-angle-right arrow_icon"></i> </a> {% if item.children %} <div class="nav-drop"> <ul> {% for child in item.children %} <li class="nav-drop-item"> <a href="{{ child.link }}">{{ child.title }}</a> </li> {% endfor %} </ul> </div> {% endif %} </li> {% endfor %} </ul> </div>

Mi código de código css es:

 .nav-drop { position: absolute; top: 0; left: 100%; width: 100%; background: #fff; display: none; text-align: center; padding: 20px 0 20px 0; background: #fff; } .dd_menu ul li a.dd_menu_a.active + .nav-drop{ display: block; }

Mi código de código javascript es:

 var dd_menu_a = document.querySelectorAll(".dd_menu_a"); dd_menu_a.forEach(function(dd_menu_item){ dd_menu_item.addEventListener("mouseover", function(){ dd_menu_a.forEach(function(dd_menu_item){ jQuery(".nav-main__brands__items").removeClass("active"); dd_menu_item.classList.remove("active"); }) dd_menu_item.classList.add("active"); }) })