Rambo
Reputation: 81
Dropdown Within a Dropdown
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.
Upvotes: 1
Views: 18847
Answers (3)
Puddle
Reputation: 3345
Here's the best example you'll find on the internet!
You can have as many sub-lists as you want. And it's plain CSS. You're welcome.
body {margin: 0; font-family: Arial, Helvetica, sans-serif;} /* clean body style */
a {outline: none; text-decoration: none;} /* clean anchor style */
.topbar, .topbar ul {list-style: none; padding: 0; margin: 0; text-align: left;} /* topbar lists clean style */
.topbar a {color: white; display: block; padding: 1em; white-space: nowrap;} /* topbar anchor style */
.topbar li li a {color: black;} /* drop lists anchor style */
/* top bar sticks at top of page */
.topbar {top: 0; position: sticky; text-align: center; background-color: #333; border-bottom: 2px solid white;}
.topbar > li {display: inline-block;} /* initial topbar items are inline */
.topbar > li:hover {background: red;} /* initial topbar items hover color */
.topbar li li {position: relative; background-color: #f9f9f9; opacity: 0.9;} /* all drop list items are relative */
.topbar li li:hover {background: #ddd;} /* all drop list items hover color */
.topbar ul {display: none; position: absolute;} /* all drop lists are hidden and absolute (so we can position relatively) */
.topbar li:hover > ul {display: block;} /* display child list when hovering an item */
.topbar ul ul {left: 100%; top: 0;} /* all child lists go right of previous list item */
/* boxes to fill page */
.boxes div {
height: 1000px;
border-bottom: 2px solid white;
scroll-margin-top: 1em;
color: black;
font-size: 50px;
text-align: center;
}
/* alternate box colors */
.boxes div:nth-child(3n+1) {background-color: lightblue;}
.boxes div:nth-child(3n+2) {background-color: lightgreen;}
.boxes div:nth-child(3n+3) {background-color: tomato;}
.boxes div:last-child {border-bottom: 0px solid white;} /* remove bottom-border on last box */<ul class="topbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a>
<ul>
<li><a href="#">News 1</a></li>
<li><a href="#">News 2</a>
<ul>
<li><a href="#">News 2 - Sub 1</a></li>
<li><a href="#">News 2 - Sub 2 (More?)</a>
<ul>
<li><a href="#">Oh</a></li>
<li><a href="#">Yeah</a></li>
<li><a href="#">Baby</a>
<ul>
<li><a href="#">Even</a></li>
<li><a href="#">More!</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">News 2 - Sub 3</a></li>
</ul>
</li>
<li><a href="#">News 3</a>
<ul>
<li><a href="#">News 3 - Sub 1</a></li>
<li><a href="#">News 3 - Sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#about">About</a>
<ul>
<li><a href="#">About 1</a></li>
<li><a href="#">About 2</a></li>
<li><a href="#">About 3</a>
<ul>
<li><a href="#">About 3 - Sub 1</a></li>
<li><a href="#">About 3 - Sub 2</a></li>
</ul>
</li>
<li><a href="#">About 4</a></li>
</ul>
</li>
<li><a href="#clients">Clients</a></li>
</ul>
<div class="boxes">
<div id="home">Home</div>
<div id="news">News</div>
<div id="about">About</div>
<div id="clients">Clients</div>
</div>Upvotes: 0
RoyCloud
Reputation: 41
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
Upvotes: 2
user6856823
Reputation:
Use Bootstrap class as it will gives you option for multilevel drop-down
See this link for help
Upvotes: 0