I’m using bootstrap 4 for my recent project,
I need to change multi-level dropdown menu chevron icon rotate on a mobile device only when tapping on parent link,
below the code of multi-level dropdown menu,
Thanks
$(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>I use bootstrap 4 for a project,
by default dropdown menu not change chevron icon rotation,
just need to change the chevron icon on a mobile devices when tapping on the link.
Thanks
Advertisement
Answer
Here is the solution. add below CSS and JS to achieve your goal.
CSS
.dropdown-rotate::after {
transform: rotate(90deg);
}
JS
$('.dropdown-toggle').on('click', function (e) {
e.target.classList.toggle('dropdown-rotate');
});
$(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-toggle').on('click', function (e) {
e.target.classList.toggle('dropdown-rotate');
});.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;
}
.dropdown-rotate::after {
transform: rotate(90deg);
}<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>