Twitter Bootstrap Multilevel Dropdown Menu
Updated Answer
* Updated answer which support the v2.1.1** bootstrap version stylesheet.
**But be careful because this solution has been removed from v3
Just wanted to point out that this solution is not needed anymore as the latest bootstrap now supports multi-level dropdowns by default. You can still use it if you're on older versions but for those who updated to the latest (v2.1.1 at the time of writing) it is not needed anymore. Here is a fiddle with the updated default multi-level dropdown straight from the documentation:
http://jsfiddle.net/2Smgv/2858/
Original Answer
There have been some issues raised on submenu support over at github and they are usually closed by the bootstrap developers, such as this one, so i think it is left to the developers using the bootstrap to work something out. Here is a demo i put together showing you how you can hack together a working sub-menu.
Relevant code
CSS
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
display: block;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
Created my own .sub-menu class to apply to the 2-level drop down menus, this way we can position them next to our menu items. Also modified the arrow to display it on the left of the submenu group.
Demo
Multilevel Dropdown Bootstrap 4, Submenu align to top of Parent Dropdown
It's just because of position: relative.
EXPLAINATION
added position: relative CSS to the .dropdown-item class because your ::after CSS not works without position: relative.
Removed position: relative CSS from the .dropdown-submenu class because Its calculate top from its height.
$(function() { $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) { event.preventDefault(); event.stopPropagation(); //method 2: remove show from all siblings of all your parents $(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show"); $(this).siblings().toggleClass("show"); //collapse all after nav is closed $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass("show"); }); });});.dropdown-submenu { /*position: relative;*/}
.dropdown-item { position: relative;}
.dropdown-submenu>.dropdown-menu { top: 0; left: 100%;}
.dropdown-submenu>a:after { font-family: "Font Awesome 5 Free" !important; font-weight: 900; content: "\f054" !important; border: none; position: absolute; right: 10px; top: 5px;}
.dropdown-menu>li { border-bottom: 1px solid rgba(0, 0, 0, 0.05);}
.dropdown-menu>li:last-child { border-bottom: none;}
.dropdown-item.active,.dropdown-item:active { background-color: #f70000 !important; color: #fff !important;}
.dropdown-item.dropdown-toggle:hover { color: #f70000;}
.dropdown-item:hover { color: #f70000;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<nav class="navbar sticky-top navbar-expand-lg navbar-light" style="background-color: white;"> <div class="container"> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link rounded-sm aishles-dropdown" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> AISLES </a> <ul class="dropdown-menu">
<!-- lvl Grocery & Pets dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Grocery & Pets</a> <ul class="dropdown-menu"> <!-- lvl 2 dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Fresh Products</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Fruits</a></li> <li><a href="#" class="dropdown-item">Vegetables</a></li> <li><a href="#" class="dropdown-item">Organic Vegetables</a></li> <li><a href="#" class="dropdown-item">Meat & Poultry</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Frozen</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Chicken</a></li> <li><a href="#" class="dropdown-item">Bread & Dough</a></li> <li><a href="#" class="dropdown-item">Desserts & Toppings</a></li> <li><a href="#" class="dropdown-item">Fruits & Vegetables</a></li> <li><a href="#" class="dropdown-item">Seafood</a></li> <li><a href="#" class="dropdown-item">Fries</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Dairy</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Food Staples</a></li> <li><a href="#" class="dropdown-item">Breakfast</a></li> <li><a href="#" class="dropdown-item">Beverages</a></li> <li><a href="#" class="dropdown-item">Bread & Bakery</a></li> <li><a href="#" class="dropdown-item">Baking & Cooking</a></li> <li><a href="#" class="dropdown-item">Chocolates & Snacks</a></li> <li><a href="#" class="dropdown-item">Desserts</a></li> <li><a href="#" class="dropdown-item">Laundry & Household</a></li> <li><a href="#" class="dropdown-item">Candies & Bubble Gum</a></li> <li><a href="#" class="dropdown-item">Pet Care</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Food Staples</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Instant Meals</a></li> <li><a href="#" class="dropdown-item">Ready-to-Eat</a></li> <li><a href="#" class="dropdown-item">Sauces & Pickles</a></li> <li><a href="#" class="dropdown-item">Spices & Recipes</a></li> <li><a href="#" class="dropdown-item">Canned & Jarred Food</a></li> <li><a href="#" class="dropdown-item">Chocolates & Snacks</a></li> <li><a href="#" class="dropdown-item">Noodles & Pasta</a></li> <li><a href="#" class="dropdown-item">Laundry & Household</a></li> <li><a href="#" class="dropdown-item">Sugar & Salt</a></li> <li><a href="#" class="dropdown-item">Pet Care</a></li> <li><a href="#" class="dropdown-item">Beans & Pulses</a></li> <li><a href="#" class="dropdown-item">Gluten Free</a></li> <li><a href="#" class="dropdown-item">Soups & Stocks</a></li> <li><a href="#" class="dropdown-item">Honey</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Breakfast</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Eggs</a></li> <li><a href="#" class="dropdown-item">Honey</a></li> <li><a href="#" class="dropdown-item">Cereals</a></li> <li><a href="#" class="dropdown-item">Muesli</a></li> <li><a href="#" class="dropdown-item">Canned & Jarred Food</a></li> <li><a href="#" class="dropdown-item">Jams & Spreads</a></li> <li><a href="#" class="dropdown-item">Noodles & Pasta</a></li> <li><a href="#" class="dropdown-item">Oatmeals & Porridge</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Bread & Bakery</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Cakes</a></li> <li><a href="#" class="dropdown-item">Bread & Buns</a></li> <li><a href="#" class="dropdown-item">Wraps & Pittas</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Baking & Cooking</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Home Baking</a></li> <li><a href="#" class="dropdown-item">Flours & Meals</a></li> <li><a href="#" class="dropdown-item">Nuts & Seeds</a></li> <li><a href="#" class="dropdown-item">Cooking Oil</a></li> <li><a href="#" class="dropdown-item">Olive Oil</a></li> <li><a href="#" class="dropdown-item">Rice</a></li> <li><a href="#" class="dropdown-item">Salad Dressings</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Chocolates & Snacks</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Snacks</a></li> <li><a href="#" class="dropdown-item">Biscuits</a></li> <li><a href="#" class="dropdown-item">Wafers</a></li> <li><a href="#" class="dropdown-item">Chocolates</a></li> <li><a href="#" class="dropdown-item">Popcorn</a></li> <li><a href="#" class="dropdown-item">Chips & Crisps</a></li> <li><a href="#" class="dropdown-item">Salsas & Dips</a></li> <li><a href="#" class="dropdown-item">Panwaari</a></li> <li><a href="#" class="dropdown-item">Dry Fruits & Dates</a></li> <li><a href="#" class="dropdown-item">Mouth Fresheners</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Desserts</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Traditional</a></li> <li><a href="#" class="dropdown-item">Jelly & Custard</a></li> <li><a href="#" class="dropdown-item">Syrups</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Laundry & Household</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Laundry</a></li> <li><a href="#" class="dropdown-item">Shoe Care</a></li> <li><a href="#" class="dropdown-item">Air Fresheners</a></li> <li><a href="#" class="dropdown-item">Cloths & Dusters</a></li> <li><a href="#" class="dropdown-item">Tissue & Toilet Rolls</a></li> <li><a href="#" class="dropdown-item">Household Cleaners</a></li> <li><a href="#" class="dropdown-item">Repellents & Insecticides</a></li> <li><a href="#" class="dropdown-item">Trash Bags</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Candies & Bubble Gum</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Bubble Gum</a></li> <li><a href="#" class="dropdown-item">Candies & Jellies</a></li> <li><a href="#" class="dropdown-item">Marshmallows</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Pet Care</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Dog Food</a></li> <li><a href="#" class="dropdown-item">Cat Food</a></li> <li><a href="#" class="dropdown-item">Bird Food</a></li> <li><a href="#" class="dropdown-item">Litter</a></li> <li><a href="#" class="dropdown-item">Pet Grooming</a></li> </ul> </li> </ul> </li> <!-- End Grocery & Pets -->
<!-- lvl Health & Beauty dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Health & Beauty</a> <ul class="dropdown-menu"> <!-- lvl 2 dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Fragrances</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Men Perfumes</a></li> <li><a href="#" class="dropdown-item">Men Deodorants</a></li> <li><a href="#" class="dropdown-item">Women Perfumes</a></li> <li><a href="#" class="dropdown-item">Women Deodorants</a></li> <li><a href="#" class="dropdown-item">Body Mists</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Hair Care</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Shampoo & Conditioner</a></li> <li><a href="#" class="dropdown-item">Hair Styling</a></li> <li><a href="#" class="dropdown-item">Hair Loss Products</a></li> <li><a href="#" class="dropdown-item">Hair Color</a></li> <li><a href="#" class="dropdown-item">Hair Oils</a></li> <li><a href="#" class="dropdown-item">Hair & Scalp Treatments</a></li> <li><a href="#" class="dropdown-item">Styling Tools</a></li> <li><a href="#" class="dropdown-item">Masks</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Makeup</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Eyes</a></li> <li><a href="#" class="dropdown-item">Lips</a></li> <li><a href="#" class="dropdown-item">Face</a></li> <li><a href="#" class="dropdown-item">Nails</a></li> <li><a href="#" class="dropdown-item">Makeup Removers</a></li> <li><a href="#" class="dropdown-item">Tools & Brushes</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Skin Care</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Creams & Lotions</a></li> <li><a href="#" class="dropdown-item">Facial Cleansers</a></li> <li><a href="#" class="dropdown-item">Scrubs & Exfoliators</a></li> <li><a href="#" class="dropdown-item">Sunscreens</a></li> <li><a href="#" class="dropdown-item">Face Wash</a></li> <li><a href="#" class="dropdown-item">Anti-Aging Products</a></li> <li><a href="#" class="dropdown-item">Treatments & Masks</a></li> <li><a href="#" class="dropdown-item">Face Whitening</a></li> <li><a href="#" class="dropdown-item">Facial Masks</a></li> <li><a href="#" class="dropdown-item">Powders</a></li> <li><a href="#" class="dropdown-item">Face Mists</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Bath & Body</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Hand Wash & Sanitizer</a></li> <li><a href="#" class="dropdown-item">Bath and Body Accessories</a></li> <li><a href="#" class="dropdown-item">Nursing Products</a></li> <li><a href="#" class="dropdown-item">Body Wash & Body Soap</a></li> <li><a href="#" class="dropdown-item">Body Oils</a></li> <li><a href="#" class="dropdown-item">Shower Gels & Creams</a></li> </ul> </li> <li><a href="#" class="dropdown-item">Eye Care</a></li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Feminine Care</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Epilators</a></li> <li><a href="#" class="dropdown-item">Tampons</a></li> <li><a href="#" class="dropdown-item">Sanitary Napkins</a></li> <li><a href="#" class="dropdown-item">Feminine Washes</a></li> <li><a href="#" class="dropdown-item">Shaving</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Men's Care</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Shaving</a></li> <li><a href="#" class="dropdown-item">Shavers & Timmers</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Personal Care</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Lip Care</a></li> <li><a href="#" class="dropdown-item">Foot & Hand Care</a></li> <li><a href="#" class="dropdown-item">Oral Hygiene</a></li> <li><a href="#" class="dropdown-item">Hair Removal</a></li> <li><a href="#" class="dropdown-item">Adult Diapers & Wipes</a></li> <li><a href="#" class="dropdown-item">Beauty Tools</a></li> <li><a href="#" class="dropdown-item">Massagers</a></li> <li><a href="#" class="dropdown-item">Ear Care</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Sexual Wellness</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Condoms</a></li> <li><a href="#" class="dropdown-item">Lubricants & Gels</a></li> </ul> </li> </ul> </li> <!-- End Health & Beauty -->
<!-- lvl Phones & Tablets dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Phones & Tablets</a> <ul class="dropdown-menu"> <!-- lvl 2 dropdown --> <li><a href="#" class="dropdown-item">Smartphones</a></li> <li><a href="#" class="dropdown-item">Tablets</a></li> <li><a href="#" class="dropdown-item">Chargers & Cables</a></li> <li><a href="#" class="dropdown-item">Power Banks</a></li> <li><a href="#" class="dropdown-item">Handsfree & Handset</a></li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Landline Phones</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Corded</a></li> <li><a href="#" class="dropdown-item">Cordless</a></li> </ul> </li> </ul> </li> <!-- End Phones & Tablets -->
<!-- lvl Electronic Accessories dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Electronic Accessories</a> <ul class="dropdown-menu"> <!-- lvl 2 dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Audio</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Headphones & Headsets</a></li> <li><a href="#" class="dropdown-item">Speakers</a></li> </ul> </li> <li><a href="#" class="dropdown-item">Batteries & Chargers</a></li> <li><a href="#" class="dropdown-item">Light Bulbs & Lamps</a></li> </ul> </li> <!-- End Electronic Accessories -->
<!-- lvl TV & Home Appliances dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">TV & Home Appliances</a> <ul class="dropdown-menu"> <!-- lvl 2 dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Video</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Streaming Players</a></li> <li><a href="#" class="dropdown-item">LCD & LED Televisions</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Kitchen Appliances</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Juicers</a></li> <li><a href="#" class="dropdown-item">Toasters</a></li> <li><a href="#" class="dropdown-item">Coffee & Tea</a></li> <li><a href="#" class="dropdown-item">Microwave & Ovens</a></li> <li><a href="#" class="dropdown-item">Blenders & Mixers</a></li> <li><a href="#" class="dropdown-item">Dispensers & Purifiers</a></li> <li><a href="#" class="dropdown-item">Cooking & Baking</a></li> </ul> </li> <li><a href="#" class="dropdown-item">Iron & Steamers</a></li> <li><a href="#" class="dropdown-item">Household Cleaners</a></li> <li><a href="#" class="dropdown-item">Air Purifiers</a></li> </ul> </li> <!-- End TV & Home Appliances -->
<!-- lvl Computing & Gaming dropdown --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Computing & Gaming</a> <ul class="dropdown-menu"> <!-- lvl 2 dropdown -->
Related Topics
Scrolling a Flexbox With Overflowing Content
Wait For Fonts to Load Before Rendering Web Page
Css Selector For Attribute Names Based on a Wildcard
Using HTML Data-Attribute to Set CSS Background-Image Url
Search Input With an Icon Bootstrap
Creating CSS Global Variables:Stylesheet Theme Management
Bootstrap Dropdowns Menus Appearing Behind Other Elements - IE7
Bootstrap 3 Modal Vertical Position Center
How to Remove Dotted Border Around Active Hyperlinks in IE8 with CSS
Drop Shadow For Png Image in Css
Combining :Last-Child With :Not(.Class) Selector in Css
Triangle Shape With Background Image
Draw Diagonal Lines in Div Background With Css
Background Image for Select (Dropdown) Does Not Work in Chrome
Enable :Focus Only on Keyboard Use (Or Tab Press)
Css: Styled a Checkbox to Look Like a Button, Is There a Hover