从菜单移动到子菜单时子菜单消失

Question

我有以下代码，我一直在研究如何将鼠标从菜单移动到子菜单（当我尝试这样做时子菜单总是消失）。

我没有用

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

在我的代码中，不确定一些小的修改是否可以解决这个问题......

感觉没搞清楚parent和child（menu）的关系，但是不知道怎么处理。非常感谢！

根据我的代码，如何修改 CSS 来解决问题（从菜单移动到子菜单再到子子菜单。我刚刚更新了我的问题以使其清楚。

Answer 1

好的，问题如下，只有当父菜单悬停时才显示子菜单，当您从父菜单移动到子菜单时，父菜单不再悬停，子菜单消失。

试试这个 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.. */

并使用以下代码修改您的 HTML div 嵌套：

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

Answer 2

.dropdown {
  position: relative;
  display: inline-block;
}

.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 {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

.dropdown:hover .sub-1 {
  display: block;
}

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

.sub-1 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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