Question

我只是想知道如何制作一个带有其他下拉列表的下拉菜单，例如：

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>

我完全不知道如何制作第二个下拉菜单 - 这将来自＆＃34;第1卷＆＃34; H3。我也认为最好将它保持在垂直方向。提前谢谢。

Answer 1

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

请参阅link获取帮助

Answer 2

我不知道这是否仍然有用，但这是我使用普通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>

CSS

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

点击此处获取CodePen preview

下拉列表中的下拉列表

2 个答案: