我有下面的代码，我被困在如何将鼠标从菜单移动到子菜单（当我尝试这样做时，子菜单总是消失）。
我没有在代码中使用<ul\>和<li\>，也不知道稍微修改一下是否可以解决这个问题......我觉得我没有弄清楚父菜单和子菜单之间的关系，但是我也不知道该怎么处理。谢谢!

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

基于我的代码，如何修改CSS来解决这个问题（从菜单到子菜单再到子菜单。我只是更新了我的问题来使它变得清楚。