Dropdown menu cuts off at the bottom of the screen

The site requires at least 1080px full-screen browser to access the full drop-down menu options.

On my laptop which has 1366x768 resolution, the drop-down menu goes off the screen (only at the bottom), and it is impossible to get to most of the menu items. I made some style changes to adjust it, but I don't think CSS can fix it. I also tried some JS script, but it hasn't helped. I am not that great on JS scripts. The website is built (sort of) on foundation framework.

Is there a way to automatically adjust the drop-down menu, move it up, when the menu is at the bottom of the screen? I am investigating a solution. If anyone has fixed this issue before, I would love to know how you did it.

I want to move away from these really long drop-down menus, but that's not going to happen anytime soon.

This is the existing behavior:

| Menu      |                      
| Menu      |
| Menu      +------------------+
| Menu >>   | Sub Menu         |
| Menu      | Sub Menu         |               
+-----------+ Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            +------------------+

This is the behavior I am looking for on laptops--when at the bottom of the screen, the second menu should automatically move up to show all the menu times and sub-menu items.

| Menu      |
| Menu      |
| Menu      +------------------+
| Menu      | Sub Menu         |
| Menu      | Sub Menu         |                      
| Menu      | Sub Menu         |
| Menu      | Sub Menu         |
| Menu >>   | Sub Menu         |
| Menu      | Sub Menu         |               
+-----------+ Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            +------------------+

Updates: The problem I have is that the tool we use creates the dropdown menu automatically. So, I can't directly edit the HTML. I can, however, identify the class and manipulate the CSS. I did try to add my custom CSS, but it didn't work and using JS script without an ID didn't give a good result either.

Here is the HTML code:

<div class="nav-wrapper">
<ul class="navigation">                                            
 <li class="has-children" >
     <a href="">Top Nav Menu</a>
     <ul class="sub-menu">
         <li class="has-children" >
             <a href="">Dropdown Menu Level 1 </a>
             <ul class="sub-menu"><li data-mc-id="31">
                 <a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

We have about five different drop-down menus, and the issue is with just ONE LONG menu. I did think about the scrollable menu, but it may be tricky to implement given the tool we use.

Thanks!