help with two menus next to each other; one appears on hover

Hello All:

I am trying to have a horizontal menu, and when you hover on an item a vertical menu appears below it (menu2). When hovering on an item in menu 2, a third menu appears next to menu2 at the same height as the item being hovered on in menu 2. https://gcommerce2.gtdsites.com/ (it is the menu I am building right below where it says “home page”) I got it all working. The item you hover on in menu2 to reveal menu3 is “submenu2”. The only problem is that when you move the mouse over to try and select one of the items in menu 3, everything disappears before you can get the mouse onto menu 3. Here is the code:

?>
<style>
nav a {
    text-decoration: none;
    font: 12px/1 Verdana;
    color: #000;
    display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
    list-style: none;
    margin: 0;
    padding: 0; }
nav ul li { margin: 0; padding: 0; }

/* Top-level menu */
nav > ul > li {
    float: left;
    position: relative; }
nav > ul > li > a {
    padding: 10px 30px;
    border-left: 1px solid #000;
    display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }

/* Dropdown Menu */
nav ul li ul {
    position: absolute;
    background: #ccc;
    width: 100%;
    margin: 0;
    padding: 0;
    display: none; }
nav ul li ul li {
    text-align: center;
    width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }

a.menu2:link + ul.menu3 {display: none;}
a.menu2:hover + ul.menu3 {display: inline-block; }

.format_text ul ul {
    margin: 0 0 0 .95em;
}

a.menu2, li.menu2 {display: inline-block;}

ul.menu2, ul.menu3 {border: black 2px solid;}

</style>

<nav>
    <ul>
        <li><a href="#">Link</a></li>
        <li>
            <a href="#">Link2</a>
            <ul class="menu2">
                <li><a href="#">Submenu1</a></li>

                <li class="menu2"><a class="menu2" href="#">Submenu2</a>

                <ul class="menu3">
                <li><a class="menu3" href="#">gmenu1</a></li>
                <li><a href="#">gmenu22</a></li>
                <li><a href="#">gmenu3</a></li>

                </ul>

                </li>
                <li><a href="#">Submenu3</a></li>

            </ul>
        </li>
        <li><a href="#">Link3</a></li>
    </ul>
</nav>

<br style="clear:both;"/>

Can anyone help with this? Thanks…