多级下拉 Bootstrap 4,子菜单对齐到父下拉菜单的顶部 [英] Multilevel Dropdown Bootstrap 4, Submenu align to top of Parent Dropdown

查看:36
本文介绍了多级下拉 Bootstrap 4,子菜单对齐到父下拉菜单的顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

最近在使用 Bootstrap 4.4 开发一个项目,

它是一家电子商务杂货店,部门有类别和子类别,所以使用默认代码的 Main 变得非常高,

供参考:下拉看起来像这样

现在在我的情况下看起来不太好,所以我希望所有子菜单都与父菜单的顶部对齐

供参考:我想做什么

我想你明白我想要什么

此外,在移动设备上它隐藏在底部

$(function() {$("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {event.preventDefault();event.stopPropagation();//方法2:从所有父母的所有兄弟姐妹中删除节目$(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show");$(this).siblings().toggleClass("show");//在导航关闭后全部折叠$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {$('.dropdown-submenu .show').removeClass("show");});});});

.dropdown-submenu {位置:相对;}.dropdown-submenu>.dropdown-menu {顶部:0;左:100%;}.dropdown-submenu>a:after {font-family:Font Awesome 5 Free"!重要;字体粗细:900;内容:\f054"!重要;边界:无;位置:绝对;右:10px;顶部:5px;}.dropdown-menu>li {边框底部:1px 实心 rgba(0, 0, 0, 0.05);}.dropdown-menu>li:last-child {边框底部:无;}.dropdown-item.active,.dropdown-item:active {背景颜色:#f70000 !重要;颜色:#fff !重要;}.dropdown-item.dropdown-toggle:hover {颜色:#f70000;}.dropdown-item:悬停{颜色:#f70000;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="样式表"/><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="容器"><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导航"><span class="navbar-toggler-icon"></span><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="假">过道</a><ul class="下拉菜单"><!-- lvl 杂货店 &宠物下拉菜单 -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">杂货&宠物<ul class="下拉菜单"><!-- lvl 2 下拉菜单-->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">生鲜产品</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">水果</a></li><li><a href="#" class="dropdown-item">蔬菜</a></li><li><a href="#" class="dropdown-item">有机蔬菜</a></li><li><a href="#" class="dropdown-item">肉类&家禽</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Frozen</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">鸡</a></li><li><a href="#" class="dropdown-item">面包&面团</a></li><li><a href="#" class="dropdown-item">甜点&浇头</a></li><li><a href="#" class="dropdown-item">水果&蔬菜</a></li><li><a href="#" class="dropdown-item">海鲜</a></li><li><a href="#" class="dropdown-item">薯条</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">乳制品</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">主食</a></li><li><a href="#" class="dropdown-item">早餐</a></li><li><a href="#" class="dropdown-item">饮料</a></li><li><a href="#" class="dropdown-item">面包&面包店</a></li><li><a href="#" class="dropdown-item">烘焙&烹饪</a></li><li><a href="#" class="dropdown-item">巧克力&零食</a></li><li><a href="#" class="dropdown-item">甜点</a></li><li><a href="#" class="dropdown-item">洗衣&家庭</a></li><li><a href="#" class="dropdown-item">糖果&泡泡糖</a></li><li><a href="#" class="dropdown-item">宠物护理</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Food Staples</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">速食</a></li><li><a href="#" class="dropdown-item">即食</a></li><li><a href="#" class="dropdown-item">酱料&泡菜</a></li><li><a href="#" class="dropdown-item">香料&食谱</a></li><li><a href="#" class="dropdown-item">罐装&罐装食品</a></li><li><a href="#" class="dropdown-item">巧克力&零食</a></li><li><a href="#" class="dropdown-item">面条&意大利面</a></li><li><a href="#" class="dropdown-item">洗衣&家庭</a></li><li><a href="#" class="dropdown-item">Sugar &盐</a></li><li><a href="#" class="dropdown-item">宠物护理</a></li><li><a href="#" class="dropdown-item">Beans &脉冲</a></li><li><a href="#" class="dropdown-item">无麸质</a></li><li><a href="#" class="dropdown-item">汤&股票</a></li><li><a href="#" class="dropdown-item">Honey</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Breakfast</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">鸡蛋</a></li><li><a href="#" class="dropdown-item">Honey</a></li><li><a href="#" class="dropdown-item">谷物</a></li><li><a href="#" class="dropdown-item">Muesli</a></li><li><a href="#" class="dropdown-item">罐装&罐装食品</a></li><li><a href="#" class="dropdown-item">Jams &点差</a></li><li><a href="#" class="dropdown-item">面条&意大利面</a></li><li><a href="#" class="dropdown-item">燕麦片&粥</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">面包&面包店</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">蛋糕</a></li><li><a href="#" class="dropdown-item">面包&包子</a></li><li><a href="#" class="dropdown-item">Wraps &皮塔斯</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">烘焙&烹饪</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">家庭烘焙</a></li><li><a href="#" class="dropdown-item">面粉&膳食</a></li><li><a href="#" class="dropdown-item">坚果&种子</a></li><li><a href="#" class="dropdown-item">食用油</a></li><li><a href="#" class="dropdown-item">橄榄油</a></li><li><a href="#" class="dropdown-item">米饭</a></li><li><a href="#" class="dropdown-item">沙拉酱</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">巧克力小吃</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">小吃</a></li><li><a href="#" class="dropdown-item">饼干</a></li><li><a href="#" class="dropdown-item">晶圆</a></li><li><a href="#" class="dropdown-item">巧克力</a></li><li><a href="#" class="dropdown-item">Popcorn</a></li><li><a href="#" class="dropdown-item">芯片&薯片</a></li><li><a href="#" class="dropdown-item">Salsas &下降</a></li><li><a href="#" class="dropdown-item">Panwaari</a></li><li><a href="#" class="dropdown-item">干果&日期</a></li><li><a href="#" class="dropdown-item">口腔清新剂</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">甜点</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">传统</a></li><li><a href="#" class="dropdown-item">果冻&奶油蛋羹</a></li><li><a href="#" class="dropdown-item">糖浆</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">洗衣&家庭</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">洗衣</a></li><li><a href="#" class="dropdown-item">鞋子护理</a></li><li><a href="#" class="dropdown-item">空气清新剂</a></li><li><a href="#" class="dropdown-item">布料&除尘器</a></li><li><a href="#" class="dropdown-item">组织&卫生纸</a></li><li><a href="#" class="dropdown-item">家庭清洁工</a></li><li><a href="#" class="dropdown-item">驱虫剂&杀虫剂</a></li><li><a href="#" class="dropdown-item">垃圾袋</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Candies &泡泡糖<ul class="下拉菜单"><!-- 3 级下拉菜单--><li><a href="#" class="dropdown-item">泡泡糖</a></li><li><a href="#" class="dropdown-item">糖果&果冻</a></li><li><a href="#" class="dropdown-item">棉花糖</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">宠物护理</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">狗粮</a></li><li><a href="#" class="dropdown-item">猫粮</a></li><li><a href="#" class="dropdown-item">鸟食</a></li><li><a href="#" class="dropdown-item">Litter</a></li><li><a href="#" class="dropdown-item">宠物美容</a></li>
  • <!-- End Grocery &宠物 --><!-- lvl Health &美容下拉菜单 -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">健康&美容</a><ul class="下拉菜单"><!-- lvl 2 下拉菜单-->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">香水</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">男士香水</a></li><li><a href="#" class="dropdown-item">男士除臭剂</a></li><li><a href="#" class="dropdown-item">女士香水</a></li><li><a href="#" class="dropdown-item">女士除臭剂</a></li><li><a href="#" class="dropdown-item">身体喷雾</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">头发护理</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">洗发水&护发素</a></li><li><a href="#" class="dropdown-item">发型设计</a></li><li><a href="#" class="dropdown-item">脱发产品</a></li><li><a href="#" class="dropdown-item">头发颜色</a></li><li><a href="#" class="dropdown-item">发油</a></li><li><a href="#" class="dropdown-item">头发&头皮护理</a></li><li><a href="#" class="dropdown-item">样式工具</a></li><li><a href="#" class="dropdown-item">面具</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">化妆</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">眼睛</a></li><li><a href="#" class="dropdown-item">嘴唇</a></li><li><a href="#" class="dropdown-item">Face</a></li><li><a href="#" class="dropdown-item">钉子</a></li><li><a href="#" class="dropdown-item">卸妆液</a></li><li><a href="#" class="dropdown-item">工具&刷子</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">护肤</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">奶油&洗剂</a></li><li><a href="#" class="dropdown-item">洁面乳</a></li><li><a href="#" class="dropdown-item">磨砂&去角质剂</a></li><li><a href="#" class="dropdown-item">防晒霜</a></li><li><a href="#" class="dropdown-item">洗面奶</a></li><li><a href="#" class="dropdown-item">抗衰老产品</a></li><li><a href="#" class="dropdown-item">治疗&掩码</a></li><li><a href="#" class="dropdown-item">面部美白</a></li><li><a href="#" class="dropdown-item">面膜</a></li><li><a href="#" class="dropdown-item">粉末</a></li><li><a href="#" class="dropdown-item">面部迷雾</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Bath &身体</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">洗手&消毒剂</a></li><li><a href="#" class="dropdown-item">浴室和身体配件</a></li><li><a href="#" class="dropdown-item">护理用品</a></li><li><a href="#" class="dropdown-item">沐浴露&沐浴露</a></li><li><a href="#" class="dropdown-item">身体油</a></li><li><a href="#" class="dropdown-item">沐浴露&面霜</a></li>
  • <li><a href="#" class="dropdown-item">眼部护理</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">女性护理</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">脱毛器</a></li><li><a href="#" class="dropdown-item">卫生棉条</a></li><li><a href="#" class="dropdown-item">卫生巾</a></li><li><a href="#" class="dropdown-item">女性洗液</a></li><li><a href="#" class="dropdown-item">剃须</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">男士护理</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">剃须</a></li><li><a href="#" class="dropdown-item">剃须刀&定时器</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">个人护理</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">唇部护理</a></li><li><a href="#" class="dropdown-item">脚&手部护理</a></li><li><a href="#" class="dropdown-item">口腔卫生</a></li><li><a href="#" class="dropdown-item">脱毛</a></li><li><a href="#" class="dropdown-item">成人纸尿裤&抹布</a></li><li><a href="#" class="dropdown-item">美容工具</a></li><li><a href="#" class="dropdown-item">按摩器</a></li><li><a href="#" class="dropdown-item">耳部护理</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">性健康</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">避孕套</a></li><li><a href="#" class="dropdown-item">润滑油&凝胶</a></li>
  • <!-- End Health &美丽 --><!-- lvl Phones &平板电脑下拉列表 -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Phones &片剂<ul class="下拉菜单"><!-- lvl 2 下拉菜单--><li><a href="#" class="dropdown-item">智能手机</a></li><li><a href="#" class="dropdown-item">平板电脑</a></li><li><a href="#" class="dropdown-item">充电器&电缆</a></li><li><a href="#" class="dropdown-item">移动电源</a></li><li><a href="#" class="dropdown-item">Handsfree &手机</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">座机电话</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">有线</a></li><li><a href="#" class="dropdown-item">无绳</a></li>
  • <!-- 结束电话 &片剂 --><!-- lvl 电子配件下拉菜单-->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">电子配件</a><ul class="下拉菜单"><!-- lvl 2 下拉菜单-->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Audio</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">耳机&耳机</a></li><li><a href="#" class="dropdown-item">演讲者</a></li>
  • <li><a href="#" class="dropdown-item">电池&充电器</a></li><li><a href="#" class="dropdown-item">灯泡&灯</a></li><!-- 结束电子配件--><!-- lvl TV &家用电器下拉菜单 -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">TV &家用电器</a><ul class="下拉菜单"><!-- lvl 2 下拉菜单-->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">视频</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">流媒体播放器</a></li><li><a href="#" class="dropdown-item">LCD &LED 电视</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">厨房用具</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">榨汁机</a></li><li><a href="#" class="dropdown-item">烤面包机</a></li><li><a href="#" class="dropdown-item">Coffee &茶</a></li><li><a href="#" class="dropdown-item">微波&烤箱</a></li><li><a href="#" class="dropdown-item">Blenders &混合器</a></li><li><a href="#" class="dropdown-item">分配器&净化器</a></li><li><a href="#" class="dropdown-item">烹饪&烘焙</a></li>
  • <li><a href="#" class="dropdown-item">铁&蒸笼</a></li><li><a href="#" class="dropdown-item">家庭清洁工</a></li><li><a href="#" class="dropdown-item">空气净化器</a></li><!-- 结束电视 &家用电器 --><!-- lvl 计算 &游戏下拉菜单 -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">计算&游戏</a><ul class="下拉菜单"><!-- lvl 2 下拉菜单-->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">游戏</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><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>
  • <li><a href="#" class="dropdown-item">笔记本电脑</a></li><li><a href="#" class="dropdown-item">控制台&配件</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">外设&配件</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">笔记本电脑包&袖子</a></li><li><a href="#" class="dropdown-item">打印机</a></li><li><a href="#" class="dropdown-item">存储卡</a></li><li><a href="#" class="dropdown-item">USB 驱动器</a></li><li><a href="#" class="dropdown-item">硬盘</a></li><li><a href="#" class="dropdown-item">网络</a></li><li><a href="#" class="dropdown-item">键盘</a></li>
  • <!-- 结束计算 &游戏 -->

    </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>

    谢谢!!

    解决方案

    只是因为position:relative.

    说明

    position: relative CSS 添加到 .dropdown-item 类,因为您的 ::after CSS 在没有 position:relative 的情况下不起作用.

    .dropdown-submenu 类中移除 position:relative CSS 因为它从它的 height 计算 top.

    $(function() {$("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {event.preventDefault();event.stopPropagation();//方法2:从所有父母的所有兄弟姐妹中删除节目$(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show");$(this).siblings().toggleClass("show");//在导航关闭后全部折叠$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {$('.dropdown-submenu .show').removeClass("show");});});});

    .dropdown-submenu {/*位置:相对;*/}.dropdown-item {位置:相对;}.dropdown-submenu>.dropdown-menu {顶部:0;左:100%;}.dropdown-submenu>a:after {font-family:Font Awesome 5 Free"!重要;字体粗细:900;内容:\f054"!重要;边界:无;位置:绝对;右:10px;顶部:5px;}.dropdown-menu>li {边框底部:1px 实心 rgba(0, 0, 0, 0.05);}.dropdown-menu>li:last-child {边框底部:无;}.dropdown-item.active,.dropdown-item:active {背景颜色:#f70000 !重要;颜色:#fff !重要;}.dropdown-item.dropdown-toggle:hover {颜色:#f70000;}.dropdown-item:悬停{颜色:#f70000;}

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="样式表"/><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="容器"><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导航"><span class="navbar-toggler-icon"></span><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="假">过道</a><ul class="下拉菜单"><!-- lvl 杂货店 &宠物下拉菜单 -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">杂货&宠物<ul class="下拉菜单"><!-- lvl 2 下拉菜单-->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">生鲜产品</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">水果</a></li><li><a href="#" class="dropdown-item">蔬菜</a></li><li><a href="#" class="dropdown-item">有机蔬菜</a></li><li><a href="#" class="dropdown-item">肉类&家禽</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Frozen</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">鸡</a></li><li><a href="#" class="dropdown-item">面包&面团</a></li><li><a href="#" class="dropdown-item">甜点&浇头</a></li><li><a href="#" class="dropdown-item">水果&蔬菜</a></li><li><a href="#" class="dropdown-item">海鲜</a></li><li><a href="#" class="dropdown-item">薯条</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">乳制品</a><ul class="下拉菜单"><!-- 3 级下拉菜单--><li><a href="#" class="dropdown-item">主食</a></li><li><a href="#" class="dropdown-item">早餐</a></li><li><a href="#" class="dropdown-item">饮料</a></li><li><a href="#" class="dropdown-item">面包&面包店</a></li><li><a href="#" class="dropdown-item">烘焙&烹饪</a></li><li><a href="#" class="dropdown-item">巧克力&零食</a></li><li><a href="#" class="dropdown-item">甜点</a></li><li><a href="#" class="dropdown-item">洗衣&家庭</a></li><li><a href="#" class="dropdown-item">糖果&泡泡糖</a></li><li><a href="#" class="dropdown-item">宠物护理</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Food Staples</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">速食</a></li><li><a href="#" class="dropdown-item">即食</a></li><li><a href="#" class="dropdown-item">酱料&泡菜</a></li><li><a href="#" class="dropdown-item">香料&食谱</a></li><li><a href="#" class="dropdown-item">罐装&罐装食品</a></li><li><a href="#" class="dropdown-item">巧克力&零食</a></li><li><a href="#" class="dropdown-item">面条&意大利面</a></li><li><a href="#" class="dropdown-item">洗衣&家庭</a></li><li><a href="#" class="dropdown-item">Sugar &盐</a></li><li><a href="#" class="dropdown-item">宠物护理</a></li><li><a href="#" class="dropdown-item">Beans &脉冲</a></li><li><a href="#" class="dropdown-item">无麸质</a></li><li><a href="#" class="dropdown-item">汤&股票</a></li><li><a href="#" class="dropdown-item">Honey</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Breakfast</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">鸡蛋</a></li><li><a href="#" class="dropdown-item">Honey</a></li><li><a href="#" class="dropdown-item">谷物</a></li><li><a href="#" class="dropdown-item">Muesli</a></li><li><a href="#" class="dropdown-item">罐装&罐装食品</a></li><li><a href="#" class="dropdown-item">Jams &点差</a></li><li><a href="#" class="dropdown-item">面条&意大利面</a></li><li><a href="#" class="dropdown-item">燕麦片&粥</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">面包&面包店</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">蛋糕</a></li><li><a href="#" class="dropdown-item">面包&包子</a></li><li><a href="#" class="dropdown-item">Wraps &皮塔斯</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">烘焙&烹饪</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">家庭烘焙</a></li><li><a href="#" class="dropdown-item">面粉&膳食</a></li><li><a href="#" class="dropdown-item">坚果&种子</a></li><li><a href="#" class="dropdown-item">食用油</a></li><li><a href="#" class="dropdown-item">橄榄油</a></li><li><a href="#" class="dropdown-item">米饭</a></li><li><a href="#" class="dropdown-item">沙拉酱</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">巧克力小吃</a><ul class="下拉菜单"><!-- lvl 3 下拉菜单--><li><a href="#" class="dropdown-item">小吃</a></li><li><a href="#" class="dropdown-item">饼干</a></li><li><a href="#" class="dropdown-item">晶圆</a></li><li><a href="#" class="dropdown-item">巧克力</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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Desserts</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Laundry & Household</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Candies & Bubble Gum</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Pet Care</a><ul class="下拉菜单"><!-- 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>
  • <!-- End Grocery & Pets --><!-- lvl Health & Beauty dropdown -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Health & Beauty</a><ul class="下拉菜单"><!-- lvl 2 dropdown -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Fragrances</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Hair Care</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Makeup</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Skin Care</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Bath & Body</a><ul class="下拉菜单"><!-- 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>
  • <li><a href="#" class="dropdown-item">Eye Care</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Feminine Care</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Men's Care</a><ul class="下拉菜单"><!-- lvl 3 dropdown --><li><a href="#" class="dropdown-item">Shaving</a></li><li><a href="#" class="dropdown-item">Shavers & Timmers</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Personal Care</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Sexual Wellness</a><ul class="下拉菜单"><!-- lvl 3 dropdown --><li><a href="#" class="dropdown-item">Condoms</a></li><li><a href="#" class="dropdown-item">Lubricants & Gels</a></li>
  • <!-- End Health & Beauty --><!-- lvl Phones & Tablets dropdown -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Phones & Tablets</a><ul class="下拉菜单"><!-- 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>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Landline Phones</a><ul class="下拉菜单"><!-- lvl 3 dropdown --><li><a href="#" class="dropdown-item">Corded</a></li><li><a href="#" class="dropdown-item">Cordless</a></li>
  • <!-- End Phones & Tablets --><!-- lvl Electronic Accessories dropdown -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Electronic Accessories</a><ul class="下拉菜单"><!-- lvl 2 dropdown -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Audio</a><ul class="下拉菜单"><!-- lvl 3 dropdown --><li><a href="#" class="dropdown-item">Headphones & Headsets</a></li><li><a href="#" class="dropdown-item">Speakers</a></li>
  • <li><a href="#" class="dropdown-item">Batteries & Chargers</a></li><li><a href="#" class="dropdown-item">Light Bulbs & Lamps</a></li><!-- End Electronic Accessories --><!-- lvl TV & Home Appliances dropdown -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">TV & Home Appliances</a><ul class="下拉菜单"><!-- lvl 2 dropdown -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Video</a><ul class="下拉菜单"><!-- lvl 3 dropdown --><li><a href="#" class="dropdown-item">Streaming Players</a></li><li><a href="#" class="dropdown-item">LCD & LED Televisions</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Kitchen Appliances</a><ul class="下拉菜单"><!-- 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>
  • <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><!-- End TV & Home Appliances --><!-- lvl Computing & Gaming dropdown -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Computing & Gaming</a><ul class="下拉菜单"><!-- lvl 2 dropdown -->
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Games</a><ul class="下拉菜单"><!-- 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>
  • <li><a href="#" class="dropdown-item">Laptops</a></li><li><a href="#" class="dropdown-item">Consoles & Accessories</a></li>
  • <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Peripherals & Accessories</a><ul class="下拉菜单"><!-- 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>
  • <!-- End Computing & Gaming -->

    </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>

    Recently working on a project using Bootstrap 4.4,

    Its an eCommerce grocery store, Departments have Categories & Sub Categories, So the Main goes very tall using default code,

    For reference: Dropdown look like this

    Now it's not looking good in my case, so I want all submenu to align to the top of the parent menu

    For Reference: What I want to do

    I think you understand what I want,

    Also, on mobile its hide in the bottom

    $(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>

    Thanks!!

    解决方案

    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 -->
                    <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>

    这篇关于多级下拉 Bootstrap 4,子菜单对齐到父下拉菜单的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆