Convert custom CSS navigation bar from horizontal to vertical

I have a custom CSS navigation menu on a WordPress site that currently has the sub-menu appear as a horizontal row below the main menu. The sub-menu appears on mouse over.

I’d like the sub-menu to drop down vertically upon mouse over instead.

Site: My Site

Here is the original sub-menu CSS:

#submenunav div
{
    position: relative;
    display: none;
    background: rgb(88,178,71); /* Old browsers */
}

#submenunav div.show
{
    display: block;
    z-index: 5;
}

#submenunav ul 
{
    display: table;
    width: 100%;
    height: 45px;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: solid 1px rgb(29,45,99);
}

#submenunav li
{
    display: table-cell;
    min-width: 130px;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 45px;
}

#submenunav a 
{
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    /* color: rgb(133,162,102); */
    color: rgb(255,255,255);
    text-transform: uppercase;
}

#submenunav li
{
    border-left: solid 1px rgb(29,45,99);
}

#submenunav li:first-child
{
    border: none;
}

I can make the menu drop vertically by changing li to display:block.

#submenunav li
{
    display: block;     <---- CHANGED FROM table-cell
    min-width: 130px;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 45px;
}

The problem becomes that the sub-menu still spans the entire submenunav div. I can correct that by adjusting the width of the submenunav div.

 #submenunav div
{
    position: relative;
    width: 25%;                 <---------------CHANGED FROM 100%
    display: none;
    background: rgb(88,178,71); /* Old browsers */
}

I’ve left the site in this state for demonstration purposes.

What I need to accomplish is getting the sub-menu to appear just under the main menu item that is moused over. I’d like that they be aligned on the left.

I think I’m going to need to create a div container for each main nav button and just size each one that way.

I’m very new to CSS and imagine there must be a “better” way to do this.

The html and php from the WordPress header.php that creates the menu:

<nav>
                    <div class="menu-main-small-container">
                    <ul class="menu">
                        <li class="menu-item home <?php if ($currCat == "home") { echo "current_page_item";} ?>">
                            <a data-category="home" href="https://secure.reilycenter.com/test_area/">HOME</a></li>
                        <li class="menu-item aquatics <?php if ($currCat == "aquatics") { echo "current_page_item";} ?>">
                            <a data-category="aquatics" href="/test_area/?page_id=182">AQUATICS</a></li>
                        <li class="menu-item clubsports <?php if ($currCat == "clubsports") { echo "current_page_item";} ?>">
                            <a data-category="clubsports" href="/test_area/?page_id=196">CLUB SPORTS</a></li>
                        <li class="menu-item group-exercise <?php if ($currCat == "group-exercise") { echo "current_page_item";} ?>">
                            <a data-category="group-exercise" href="/test_area/?page_id=87">FITNESS PROGRAMS</a></li>
                        <li class="menu-item intramurals <?php if ($currCat == "intramuralsports") { echo "current_page_item";} ?>">
                            <a data-category="intramurals" href="/test_area/?page_id=137">INTRAMURALS</a></li>
                        <li class="menu-item outdoor <?php if ($currCat == "outdoor") { echo "current_page_item";} ?>">
                            <a data-category="outdoor" href="/test_area/?page_id=211">OUTDOOR ADVENTURES</a></li>
                        <li class="menu-item youth <?php if ($currCat == "youth") { echo "current_page_item";} ?>">
                            <a data-category="youth" href="/test_area/?page_id=522">YOUTH</a></li>
                    </ul>
                    </div>
                </nav>
                <div id="submenunav">
                    <?php
                        $categories = get_categories();
                        foreach($categories as $category)
                        { 
                            wp_nav_menu( array('theme_location' => 'header','menu' => $category->cat_name,'fallback_cb' => 'mytheme_nav_fallback') );
                        }
                    ?>
                </div>