我写了下面的代码，它有一个下拉菜单。我想知道如何使一个子菜单的基础上，目前的代码。我试图使它嵌套，但它没有工作在正确的方式。我也浏览了很多，但没有得到一个好的答案。下面的图片显示了我想得到的。谢谢!
the submenu I wanna make
网页：

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

HTML和CSS中的代码。