Dropdown Within a Dropdown

Question

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.

Answer 1

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

Answer 2

Use Bootstrap class as it will gives you option for multilevel drop-down

See this link for help