Html 下拉列表中的下拉列表

我只是想知道如何制作一个包含另一个下拉菜单的下拉菜单，例如：

Dropdown Title
    Title 1
    Title 2
       Item 1
       Item 2
       Item 3
    Title 3

到目前为止，我只制作了一个下拉菜单：

<li class="dropdown">
    <a class="dropbtn">Novel</a>
    <div class="dropdown-content">
        <a class="dropbtn"><h3>Volume 1</h3></a>
        <a href="index1.html">Chapter 1</a>
        <a href="index2.html">Chapter 2</a>
        <a href="index3.html">Chapter 3</a>
        <a href="index4.html">Chapter 4</a>
        <a href="index5.html">Chapter 5</a>
        <a href="index6.html">Chapter 6</a>
    </div>
</li>

---

我真的不知道如何制作第二个下拉菜单-它将来自“Volume 1”h3。我还认为最好保持垂直方向。提前感谢。

使用引导类，因为它将为您提供多级下拉选项

---

查看此帮助

我不知道这是否仍然相关，但以下是我使用纯CSS所做的

要避免将鼠标悬停在第二个下拉列表上时隐藏主下拉列表，请确保主下拉列表使用div，内部下拉列表使用第二个div，如图所示

HTML

<!--   ****** NavBar ****** -->
    <div class="navbar">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <div class="dropdown">
        <div class="dropbtn">Dropdown</div>
        <!--  Main Dropdown -->
        <div class="dropdown-one">
          <div id="link1" class="dItem" href="#">Link 1
            <!--  Inside Dropdown -->
            <div class="dropdown-two">
              <div class="dItem" id="file" href="#">Import</div>
            </div>
          </div>
          <div class="dItem" href="#">Link 2</div>
          <div class="dItem" href="#">Link 3</div>
        </div>
      </div> 
    </div>

---

单击此处查看一个

我在寻找一种没有引导的方法Botstrap是一种简单的方法

.navbar {
  position: sticky;
  height: 46px;
  background-color: #1b1b1b;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    position: relative;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-one {
  cursor: pointer;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-two {
  cursor: pointer;
  display: none;
  position: absolute;
  left: 160px;
  top: 0px;
  min-width: 160px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-one, #link1:hover > .dropdown-two {
  display: block;
}

.dropdown-one .dItem {
    color: black;
    padding: 12px 16px;
    display: block;
    text-align: left;
}

.dropdown-one .dItem:hover, .dropdown-two a:hover {
    background-color: #ddd;
}