Solved Making submenus scrollable

I'm trying to deal with the Divi wordpress theme and a menu with multiple levels of depth (submenus).
By default, if the screen is too small (or the menu is too large) part of the menus are cut off.
To try and fix it, I wanted to make them scrollable. The problem is that since submenus are placed inside the `li` elements in their parent's `ul`, once visible, the parent scroll height changes, taking into account any submenu height. I tried allowing scrolling to only the deepest active menu (i.e. the one the user is on) and disabling scrolling for any other menu. However, when the scrolling is disabled (`overflow:hidden` or `visible`), the menu scrolls back to the top.

My fix was to add the following js to only allow scrolling for the last hovered menu with no hovered submenu inside. Note that if you visit the website, this code is currently being added to the footer.

HTML:

<script>
function menuScrolls(){
  setTimeout(()=>{
    jQuery('.sub-menu').css('overflow-y','visible');
    jQuery('.sub-menu').css('overflow-x','visible');
    jQuery('.et-hover > .sub-menu:not(:has(.et-hover:has(ul)))').last().each((index, item) => {
      let t =jQuery(item).offset().top-window.scrollY;
      if(window.innerHeight < t + item.scrollHeight){
        jQuery(item).css('max-height', `calc(100vh - ${t+30}px`);
        jQuery(item).css('overflow-x', 'hidden');
        jQuery(item).css('overflow-y', 'auto');
      }
      else{
        jQuery(item).css('overflow-y', 'hidden');
      }
    });
  },200);
}

jQuery(document).ready(menuScrolls);
jQuery(window).resize(menuScrolls);
jQuery(document).on('mouseenter', '#top-menu li', menuScrolls);
</script>

In order to reproduce:
1. Go to codelearn.cat
2. Make your window rather short
3. Hover on the menu "Centres" > "Barcelona"
4. Scroll a bit but not too much ( so you can still see "Barcelona Ciutat")
5. Hover "Barcelona Ciutat"

You'll see the next submenu (Barcelona ciutat) appears and Barcelona menu does not have a scrollbar anymore. However, the Barcelona menu jumps back to the top, since the scrolling is disabled. The text is still visible as well since I only limited the height but cannot set overflow to hidden otherwise the submenus are not shown either. Maybe with some absolute positioning this could be solved but I haven't found a way yet.

Can anyone suggest a woraround or a fix to allow submenus to scroll? We've been trying to deal with this for a while, it is weird the theme does not support this by default....

 

I see that adding the class mega-menu to "centres" menu, it gives it a different style, where everything is visible. Still, it looks less nice since one of the menus is much larger than the other ones, producing a large blank space

 

mega-menu also makes the "campus" menu look weird since some subitems have no children