Dropdown submenu in html

I wrote the following code, which has a dropdown menu. I'm wondering how to make a submenu based on current code. I'm trying to make it nested, but it did not work on the right way. I also browsed a lot, but did not get a good answer. The following picture shows what I wanna get. Thanks!

the submenu I wanna make

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">
    <a href="#">level_1</a>
    <a href="#">level_1</a>
    <a href="#">level_1</a>
  </div>
</div>

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

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

@media screen and (max-width: 600px) {
  .w3.my-nav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .w3.my-nav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .w3.my-nav.responsive {position: relative;}
  .w3.my-nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .w3.my-nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .w3.my-nav.responsive .dropdown {float: none;}
  .w3.my-nav.responsive .dropdown-content {position: relative;}
  .w3.my-nav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  }

code in html and css.

Here you can try this logic :
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;
      }

.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_11</a>
          <a href="#">level_12</a>
          <a href="#">level_13</a>
        </div>
        <!--  -->
        <a href="#">level_1</a>
        <a href="#">level_1</a>
      </div>
    </div>