下拉菜单中的下拉菜单 [英] Dropdown Within a Dropdown

问题描述

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

  Dropdown Title 
标题1 
标题2 
项目1 
项目2 
项目3 
标题3 
  

到目前为止，我已经做了一个下拉菜单：

 < ; li class = dropdown> 
< a class = dropbtn>小说< / a> 
< div class = dropdown-content> 
< a class = dropbtn>< h3>卷1< / h3>< / a> 
< a href = index1.html>第1章< / a> 
< a href = index2.html>第2章< / a> 
< a href = index3.html>第3章< / a> 
< a href = index4.html>第4章< / a> 
< a href = index5.html>第5章< / a> 
< a href = index6.html>第6章< / a> 
< / div> 
< / li> 
  

我真的不知道如何制作第二个下拉菜单-这将来自第1卷h3。我也认为最好使其保持垂直方向。

解决方案

我不知道这是否仍然有用，但这是我使用普通CSS所做的事情。 / p>

要避免将主下拉菜单悬停在第二个下拉菜单上时隐藏，请确保将div用作主下拉菜单，并在其中将第二个div用于内部下拉菜单

HTML

  <！-****** NavBar ******-> 
< div class = navbar> 
< a href =＃home> Home< / a> 
< a href =＃news>新闻< / a> 
< div class = dropdown> 
< div class = dropbtn> Dropdown< / div> 
<！-主下拉菜单-> 
< div class = dropdown-one> 
< div id = link1 class = dItem href =＃>链接1 
<！-内部下拉菜单-> 
< div class = dropdown-two> 
< div class = dItem id = file href =＃> Import< / div> 
< / div> 
< / div> 
< div class = dItem href =＃>链接2< / div> 
< div class = dItem href =＃>链接3< / div> 
< / div> 
< / div> 
< / div> 
  

CSS

  .navbar {
位置：粘性； 
高度：46像素； 
 background-color：＃1b1b1b; 
} 
 
 .navbar a {
 float：left; 
 font-size：16px; 
颜色：白色； 
 text-align：center; 
 padding：14px 16px; 
文字修饰：无； 
} 
 
 .dropdown {
 float：left; 
职位：相对； 
} 
 
 .dropdown .dropbtn {
 font-size：16px; 
边界：无； 
大纲：无； 
颜色：白色； 
 padding：14px 16px; 
 background-color：继承; 
 font-family：继承； 
保证金：0; 
} 
 
 .navbar a：hover，.dropdown：hover .dropbtn {
 background-color：red; 
} 
 
 .dropdown-one {
 cursor：指针； 
显示：无； 
头寸：绝对； 
 background-color：＃f9f9f9; 
最小宽度：160像素； 
 box-shadow：0px 8px 16px 0px rgba（0,0,0,0.2）; 
} 
 
 .dropdown-two {
 cursor：指针； 
显示：无； 
头寸：绝对； 
左：160px； 
 top：0像素； 
最小宽度：160像素； 
 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; 
显示：块； 
 text-align：左； 
} 
 
 .dropdown-one .dItem：hover，.dropdown-两个a：hover {
 background-color：#ddd; 
} 
  

单击此处获取 CodePen预览

I am just wondering how to make a dropdown menu with another dropdown inside of it, so for instance:

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

I have made a single dropdown menu so far:

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

I have literally no idea how to make the second dropdown menu - which will come from the "Volume 1" h3. I also think it will be best to keep it in the vertical orientation. Thanks in advance.

解决方案

I don't know if this is still relevant but here is what I did with plain CSS.

To avoid the main dropdown to hide when hovering over the second dropdown you want to make sure to use a div for the main dropdown and inside it a second div for the inside dropdown as show.

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

Click here for a CodePen preview

这篇关于下拉菜单中的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！