I have created one vertical scrollable menu which will include many main categories.
When someone mouseover, over a main category then it will show him one submenu. I want this submenu to have the same height as the main category.
But when the main menu is scrolled then the submenu exceeds the height. It is done in a way not to exceed the height and to lock at the bottom?
I am sending you some images to understand the problem.
correct correct
Now some images when main menu scrolling
wrong wrong

My twig-html code is:

<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>

My css code code is:

.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;
}

My javascript code code is:

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");
    })
})