我正在使用BS 4和jQuery 2.2.4。我创建了一个具有3层菜单的导航栏（即，从最高级别开始的2级下拉菜单）。
除了在移动设备上出现一个小故障外，菜单的工作效果非常好。在移动设备上，菜单可以折叠到汉堡包上。我可以单击它以显示菜单/子菜单。
当我触摸子菜单（或在小型PC浏览器窗口上将鼠标悬停在...上）时，问题就出现了……它显示了它的子菜单，但是当我向下移动鼠标以选择一个项目时，下拉菜单仅在该级别上备份，因此无法在该子菜单下选择任何内容。在没有鼠标的实际移动设备上，我触摸了子项，但是什么也没发生。
这就是问题……这仅在第一子菜单项（智能手机）上发生。在第二个子菜单项（计算机）上不会发生这种情况。
无论是“智能手机”菜单还是“计算机”菜单，这似乎都在第一子菜单的项目上发生（我尝试交换代码顺序）。我什至多次（当然有唯一的ID）重复了第一子菜单。结果是它们所有人都具有相同的行为-除了最后一个子菜单（当只有智能手机和计算机子菜单时，计算机成为“最后一个”菜单），因此也许可以提供一个线索。
我制作了一个视频，以更好地说明我的深夜措辞（https://drive.google.com/open?id=1X_3kY-PBEgLra_mhvpZwPRsQMxd2-SRD）。
我的猜测是，这对于训练有素的眼睛来说是一个简单的解决方法。将不胜感激学习我的方式的错误：）
现在输入代码...
/*=========================== Navigation ============================ */
.navbar {
background-color: #fff;
box-shadow: 1px 5px 10px rgba(49, 49, 49, 0.21);
}
.navbar-nav a {
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 16.5px;
letter-spacing: 0.5px;
line-height: 25px;
}
.navbar-nav a {
color: #404044;
}
.navbar-nav .nav-link {
padding-right: 1.2rem !important;
padding-left: 1.2rem !important;
}
.nav-item {
border-radius: 0px;
transition: all .2s ease-in-out;
}
.navbar .nav-item:focus .dropdown.show {
background: transparent !important;
}
.navbar .nav-item.active,
.navbar .nav-item:hover {
transition: all .4s ease-in-out;
}
.navbar .nav-item.active {
border-bottom: 6px solid;
}
.navbar .nav-item.active a .dropdown-item {
border: 0px !important;
}
.navbar .nav-item:hover a {
color: #fff;
}
/* dropdown style */
.nav-link.dropdown-toggle:focus {
background: transparent !important;
}
.dropdown-item {
color: #fff !important;
transition: all .2s ease-in-out;
line-height: 45px !important;
}
.dropdown-menu {
box-shadow: 1px -1px 10px 4px rgba(49, 49, 49, 0.21);
border: 0px;
border-radius: 0;
}
.navbar .dropdown-menu a:before {
display: none;
}
/* navbar brand */
.nav-brand {
line-height: 20px;
margin-top: 0px;
}
.nav-brand img {
max-height: 60px;
}
.navbar-brand i {
vertical-align: sub;
margin-right: 10px;
font-size: 45px;
}
.navbar-toggler {
transition: all 0.5s ease 0s;
background: #fff;
margin-right: 10px;
}
/*
*
* ==========================================
* CUSTOM UTIL CLASSES - responsible for the 3rd level of sub-menu (e.g. MAIN / SUB-MENU / ITEM1, ITEM 2)
* ==========================================
*
*/
.navbar-nav li:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > a:before { /* changed from "after" to "before", else the misalignment as described below occurred */
content: "\f0da"; /* doesn't seem to do anything with "before" modification above */
/*float: right; - this causes sub-menu caret icons to misalign to below the sub's title/name */
border: none;
font-family: "Font Awesome 5 Free";
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
}
<div id="navbarContent" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a id="dropdownMenu1" href="#" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="nav-link dropdown-toggle">Products
</a>
<ul aria-labelledby="dropdownMenu1" class="dropdown-menu border-0 shadow">
<li><a class="dropdown-item" href="/phonecase">Phone Case</a></li>
<li class="dropdown-submenu">
<a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="dropdown-item dropdown-toggle">Smart Phone
</a>
<ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
<li><a class="dropdown-item" tabindex="-1" href="/smartphone/iphone">iPhone</a></li>
<li><a class="dropdown-item" tabindex="-1" href="/smartphone/android">Android</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a id="dropdownMenu3" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="dropdown-item dropdown-toggle">Computer
</a>
<ul aria-labelledby="dropdownMenu3" class="dropdown-menu border-0 shadow">
<li><a class="dropdown-item" tabindex="-1" href="/computer/mac">iMac</a></li>
<li><a class="dropdown-item" tabindex="-1" href="/computer/pc">PC</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a id="dropdownMenu4" href="#" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="nav-link dropdown-toggle">Shoes
</a>
<ul aria-labelledby="dropdownMenu4" class="dropdown-menu border-0 shadow">
<li><a class="dropdown-item" href="/shoes/loafers">Loafers</a></li>
<li><a class="dropdown-item" href="/shoes/sandals">Sandals</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="/other1">Other 1</a></li>
<li class="nav-item"><a class="nav-link" href="/other2">Other 2</a></li>
<li class="nav-item"><a class="nav-link" href="/other3">Other 3</a></li>
</ul>
</div>
谢谢您的帮助！
答案 0 :(得分：0)
经过反复尝试，我很高兴地报告我找到了答案！尤里卡！
这是CSS中一行的简单更改：
此...
.navbar-nav li:hover > .dropdown-menu {
display: block;
}
到...
.navbar-nav li:hover > .dropdown-menu {
display:grid; /* changing "block" to "grid" got everything working (except for IE11, but I'll report that elsewhere)
}