Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
KARTHIK K S
Courses Plus Student 3,435 PointsHow to add nested dropdown using bootstrap
I need to add submenu for level2 as level2(1).I can't be able to get level2 submenu in the below code please try to sort it out...
<html> <head> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="js/bootstrap.min.js"> </script> <script src="js/bootstrap/js"> </script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand text-muted">LOGO</a> <div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" >
<li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a data-toggle="dropdown" data-target="#">Contacts<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">level1</a></li> <li class="dropdown-submenu"> <a href="#">level2</a> <ul class="dropdown-menu"> <li> <a href="#">Level2(1)</a> </li> </ul> </li>
</ul> </li> </ul> </div> </div> </div>
</body> </html>
KARTHIK K S
Courses Plus Student 3,435 PointsHere is my code <html> <head> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="js/bootstrap.min.js"> </script> <script src="js/bootstrap/js"> </script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand text-muted">LOGO</a> <div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" >
<li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a data-toggle="dropdown" data-target="#">Contacts<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">level1</a></li> <li class="dropdown-submenu"> <a href="#">level2</a> <ul class="dropdown-menu"> <li> <a href="#">Level2(1)</a> </li> </ul> </li>
</ul> </li> </ul> </div> </div> </div>
</body> </html>
Adam Sackfield
Pro Student 19,663 PointsNo code is coming through.Please use codepen.io
5 Answers
jonathan sumner
2,715 PointsI don't see any code included here but I can tell you that when I first started out learning how to create drop down menus using pure css one of the mistakes I made involved setting up my list items correctly. You want to set your sub - ul tags with in the il tags of the section you are nesting the drop down list regardless of the level you are working on.
KARTHIK K S
Courses Plus Student 3,435 PointsI can't get you can you please share your comment as "code".I could understand it better please it's really important..
jonathan sumner
2,715 PointsOk, try this...
<ul>
<li> candy
<ul>
<li>gum</li>
<li>taffy</li>
<li>suckers
<ul>
<li>grape</li>
<li>Blueberry<//li>
</li>cherry</li>
</ul>
</li>
</ul>
</li>
<li>contact</li>
</ul>
Notice that after candy I didn't close the li tag until after the ul that will drop down from that list item. And the l2 layer menu is nested within the "suckers" list item the same way.
when targeting the sub layers in css you simply:
ul {
}
ul li {
}
ul li ul {
}
ul li ul li {
}
ul li ul li ul {
}
uil li ul li ul li {
}
```Or you can assign classes to the ul's. Does that help at all? I would also like to see your code if you can post it.
KARTHIK K S
Courses Plus Student 3,435 PointsI need to add submenu for level2 as level2(1).I can't be able to get level2 submenu in the below code please try to sort it out...
<html> <head> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="js/bootstrap.min.js"> </script> <script src="js/bootstrap/js"> </script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand text-muted">LOGO</a> <div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" >
<li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a data-toggle="dropdown" data-target="#">Contacts<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">level1</a></li> <li class="dropdown-submenu"> <a href="#">level2</a> <ul class="dropdown-menu"> <li> <a href="#">Level2(1)</a> </li> </ul> </li>
</ul> </li> </ul> </div> </div> </div>
</body> </html>
Bady qb
10,418 PointsYou can try this
<ul class="dropdown-menu">
<li><a href="#">About Treehouse</a></li>
<li><a href="#">Video Library</a>
<ul>
<li><a href="#">Additional</a></li>
</ul>
</li>
<li><a href="#">Learning Adventures</a></li>
<li class="divider"></li>
<li><a href="#">Plans & Pricing</a></li>
</ul>
Additional nested to Video Library
Adam Sackfield
Pro Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsCould you share your code to show your efforts at solving this task and to give us a better understanding of what you may be doing incorrectly. I would be happy to assist but you need to help me help you.
Thanks Adam