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!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
      }

<!-- language: lang-html -->

<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>

<!-- end snippet -->

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.

Ok, the problem is the following, you are showing the submenu only when the parent menu is being hovered and when you move from the parent menu to the submenu, the parent menu is no longer being hovered and the submenu disappears.

try with this CSS

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.dropdown .dropbtn {
  /* your styles */
}

.dropdown-content,
.sub-1,
.sub-2 { /* add a new class for the second-level submenu */
  display: none;
  /* your styles */
}

/* show the first-level submenu when parent is being hovered */
.dropdown:hover .dropdown-content {
  display: block;
}

/* show the second-level submenu when either its parent or itself is being hovered */
.sub-1:hover .sub-2,
.sub-2:hover {
  display: block;
}

/* your styles for hover effects, links etc.. */

<!-- end snippet -->

and modify your HTML div nest with this code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div class="dropdown" id="myDropdown">
  <button class="dropbtn">
    <!-- your button content -->
  </button>
  <div class="dropdown-content">
    <a href="#">level_1</a>
    <div class="sub-1">
      <a href="#">level_11</a>
      <div class="sub-2">
        <a href="#">level_111</a>
        <a href="#">level_112</a>
      </div>
      <a href="#">level_12</a>
      <a href="#">level_13</a>
    </div>
    <a href="#">level_1</a>
    <a href="#">level_1</a>
  </div>
</div>

<!-- end snippet -->

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!
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->