多級下拉 Bootstrap 4，子菜單與父下拉列表頂部對齊

Question

最近在做一個使用 Bootstrap 4.4 的項目，

它是一家電子商務雜貨店，部門有類別和子類別，所以 Main 使用默認代碼非常高，

供參考：下拉看起來像這樣

現在在我的情況下看起來不太好，所以我希望所有子菜單都與父菜單的頂部對齊

供參考：我想做什么

我想你明白我想要什么，

此外，在移動設備上，它隱藏在底部

 $(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-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 --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Games</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Xbox</a></li> <li><a href="#" class="dropdown-item">Nintendo</a></li> <li><a href="#" class="dropdown-item">PlayStation</a></li> </ul> </li> <li><a href="#" class="dropdown-item">Laptops</a></li> <li><a href="#" class="dropdown-item">Consoles & Accessories</a></li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Peripherals & Accessories</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Laptop Bags & Sleeves</a></li> <li><a href="#" class="dropdown-item">Printers</a></li> <li><a href="#" class="dropdown-item">Memory Cards</a></li> <li><a href="#" class="dropdown-item">USB Drives</a></li> <li><a href="#" class="dropdown-item">Hard Drives</a></li> <li><a href="#" class="dropdown-item">Networking</a></li> <li><a href="#" class="dropdown-item">Keyboards</a></li> </ul> </li> </ul> </li> <!-- End Computing & Gaming --> </ul> </li> </ul> </div> </div> </nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

謝謝！！

Answer 1

這只是因為position: relative 。

解釋

added position: relative CSS to the .dropdown-item class because your::after CSS not works without position: relative .

從.dropdown-submenu class 中刪除position: relative CSS 因為它從height計算top 。

 $(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 --> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Games</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Xbox</a></li> <li><a href="#" class="dropdown-item">Nintendo</a></li> <li><a href="#" class="dropdown-item">PlayStation</a></li> </ul> </li> <li><a href="#" class="dropdown-item">Laptops</a></li> <li><a href="#" class="dropdown-item">Consoles & Accessories</a></li> <li class="dropdown-submenu"> <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Peripherals & Accessories</a> <ul class="dropdown-menu"> <!-- lvl 3 dropdown --> <li><a href="#" class="dropdown-item">Laptop Bags & Sleeves</a></li> <li><a href="#" class="dropdown-item">Printers</a></li> <li><a href="#" class="dropdown-item">Memory Cards</a></li> <li><a href="#" class="dropdown-item">USB Drives</a></li> <li><a href="#" class="dropdown-item">Hard Drives</a></li> <li><a href="#" class="dropdown-item">Networking</a></li> <li><a href="#" class="dropdown-item">Keyboards</a></li> </ul> </li> </ul> </li> <!-- End Computing & Gaming --> </ul> </li> </ul> </div> </div> </nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>