I have created this codepen: https://codepen.io/AnkitaSood/pen/dyEWNaB
This is the basic template of the navigation with main links and secondary links:

<nav>
<ul>
    <li>
        <div class="main-link-container">
            <a href='#' class="main-link">Link 1</a>
            <div class="secondary-links">
            </div>
        </div>
    </li>
...
 </ul>

I would like to make the nav scroll-able on overflow of y-axis. I also want to be able to display the secondary-links always on hover. Currently on hover of the last main-link, not all of the secondary-links associated with it aren’t getting displayed. I want that container to be aligned such that the bottom of that container is aligned with the bottom of the last main link like in the screenshot: