Submenu disappear when moving from menu to submenu

I have the following code, I'm stuck on how to move the mouse from the menu to the submenu (the submenu always disappears when I tried doing so).

I did not use <ul\> and <li\> in my code and not sure if some little modify can solve this problem... I feel like I did not figure out the relationship between the parent and the child (menu), but I have no clue about how to deal with it. Thanks a lot!

.dropdown .dropbtn {
        border: none;
        outline: none;
        color: #0f4391;
        padding-top: 8.5px;
        padding-right: 15px;
        padding-bottom: 8.5px;
        padding-left: 15px;
        background-color: inherit;
        font-family: inherit;
      }

      .dropdown-content,
      .sub-1 {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
      }

      .dropdown-content a,
      .sub-1 a {
        float: none;
        color: #0f4391;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
      }

      .dropbtn:hover {
        background-color: lightgray;
        color: black;
      }

      .dropdown:hover .dropdown-content {
        display: block;
      }


      /* To let css detect next element of hovered element to take action */
      .dropdown .dropdown-content a:nth-child(1):hover + .sub-1 {
        background-color: hotpink;
        display: block;
        margin-left: 10em;
        margin-top : -2.5em;
      }

<div class="dropdown" id="myDropdown">
      <!--  -->
      <button class="dropbtn">
        <i style="font-size: 24px" class="fa"></i> level_0
        <i class="fa fa-caret-down"></i>
      </button>
      <!--  -->
      <div class="dropdown-content">
        <!-- Logic : div after element (to be hovered) to detect for action-->
        <a href="#">level_1</a>
        <div class="sub-1">
          <a href="#">level_1-1</a>
          <a href="#">level_1-2</a>
          <a href="#">level_1-3</a>
        </div>
        <!--  -->
        <a href="#">level_2</a>
        <a href="#">level_3</a>
      </div>
    </div>

Based on my code, how to modify CSS to solve the problem (moving from menu to submenu to sub submenu. I just updated my question to make it clear.

Solution

Okay, I think I finally solved the problem by figuring out the relationships between parent and child div when hovering. Also, it seems like the part of menu and submenu should be overlapped (at least no gap).

.sub-1:hover, .dropdown .dropdown-content a:nth-child(3):hover +
.sub-1 {
        background-color: inherit;
        display: inherit;
        margin-left: 8em;
        margin-top: -2.5em; }

Here is the updated css and html. Thanks!

#myDropdown {
    display: inline-block;
    vertical-align: -3.3px;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: #0F4391;
  padding-top: 8.5px;
  padding-right: 15px;
  padding-bottom: 8.5px;
  padding-left: 15px;
  background-color: inherit;
  font-family: inherit;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.sub-1 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 279px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a, .sub-1 a {
  float: none;
  color: #0F4391;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.w3.my-nav a:hover, .dropdown:hover .dropbtn {
  background-color: lightgray;
  color: black;
}


.dropdown:hover .dropdown-content {
  display: block;
}

.sub-1:hover, .dropdown .dropdown-content a:nth-child(3):hover + .sub-1 {
        background-color: inherit;
        display: inherit;
        margin-left: 8em;
        margin-top: -2.5em;
}

<div class="dropdown" id="myDropdown">
  <button class="dropbtn">
    Main Menu
  </button>
  <div class="dropdown-content">
    <a href="#">Level1_1</a>
    <a href="#">Level1_2</a>
    <a href="#">Level1_3</a>
    <div class="sub-1" id="sub-1">
      <a href="#">SubLevel1_3-1</a>
      <a href="#">SubLevel1_3-2</a>
    </div>
  </div>
</div>