css - 悬停时显示 DIV 子菜单下拉菜单

Question

我正在尝试使用 DIV(没有 UL/LI)创建一个非常简单的悬停/下拉菜单。我当前的代码显示带有 3 个选项的菜单，但我需要的是在链接 2 下有一个子菜单。这是我当前的代码。

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 0px;
        font-size: 12px;
        border: none;
        cursor: pointer;
    }
    
    .dropdown {
      margin-top:200px;
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 30px;
        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-content a:hover {
        background-color: #f1f1f1;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
        bottom: 100%;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    
    .subdiv {
        display:none;
    }
    
    .dropdown:hover .subdiv {
        display:block;
    }

    <div class="dropdown">
      <button class="dropbtn">^</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

我想做的是:

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
        <div class="submenu">
            <a href="#">SubLink 1</a>
        </div>
    <a href="#">Link 3</a>
  </div>
</div>

当您将鼠标悬停在链接 2 上时，SubLink 1 元素出现的位置，但我尝试过的所有方法都不起作用，所以我希望其他人可以提供帮助。

Answer 1

你可以用下面的方法做到这一点，你需要做的就是设置一个包含子菜单和悬停链接的div(这里是submenu_holder)，下一步很简单，因为它与submenu_holder的过程相同带下拉菜单。

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 0px;
        font-size: 12px;
        border: none;
        cursor: pointer;
    }
    
    .dropdown {
      margin-top:200px;
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 30px;
        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-content a:hover {
        background-color: #f1f1f1;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
        bottom: 100%;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    
    .subdiv {
        display:none;
    }
    
    .dropdown:hover .subdiv {
        display:block;
    }

.submenu {
  display:none;
  position:absolute;
  left:60px;
  top:0px;
}

.submenu_holder:hover .submenu {
  display:block;
}

.submenu_holder {
  position:relative;
}

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu_holder">
      <a href="#">Link 2</a>
      <div class="submenu">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>