大佬教程收集整理的这篇文章主要介绍了Bootstrap Nav Subnav 在悬停鼠标移动时消失，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个带有下拉子导航的引导导航栏，在悬停时显示 - 但是当我尝试将鼠标向下移动到子导航时，它在我到达之前消失了。我如何确保它不会消失，而是在向下移动鼠标时持续存在？
这仅适用于桌面。
谢谢！
https://codepen.io/olliewsm/pen/PoGrbZj
li.dropdown:hover>.dropdown-menu {
display: inline;
}
.dropdown-menu {
BACkground-color: black !important;
border: none !important;
border-radius: 0px !important;
}
.dropdown-item {
color: white !important;
display: inline !important;
padding: .25rem 0.75rem !important;
line-height: 2.5rem;
}
.dropdown-item:hover{
BACkground-color: transparent !important;
color: #FFB703 !important;
}
.mlauto1 {
float: right;
margin-right: 8px;
}
nav {
line-height: 2.5rem;
}
@media (min-wIDth: 768pX) {
li.dropdown.scale > .dropdown-menu {
display:block;
opacity: 0;
-o-transform: scale(0);
-ms-transform: scale(0);
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-Transition: -o-opacity 1.0s;
-ms-Transition: -ms-opacity 1.0s;
-moz-Transition: -moz-opacity 1.0s;
-webkit-Transition: -webkit-opacity 1.0s;
}
li.dropdown.scale:hover > .dropdown-menu {
opacity: 1;
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}<!DOCTYPE HTML>
<HTML lang="en">
<head>
<title>bootstrap Example</title>
<Meta charset="utf-8">
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">
<link rel="stylesheet" href="https://use.Fontawesome.com/releases/v5.8.1/CSS/all.CSS" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIEbhndOJK28anvf" crossorigin="anonymous">
<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/3.4.0/jquery.min.Js"></script>
<script src="https://cdnjs.cloudFlare.com/AJAX/libs/popper.Js/1.14.7/umd/popper.min.Js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/Js/bootstrap.min.Js"></script>
</head>
<body>
<nav class="navbar navbar-full navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</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 ml-auto">
<li class="nav-item dropdown scale position-static" ID="parent">
<a class="nav-link dropdown-toggle" href="#" ID="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
solutions
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<div class="mlauto1">
<a class="dropdown-item mx-auto" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
</div>
</div>
</li>
<li class="nav-item active">
<a class="nav-link active" href="#">our story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">work</a>
</li>
</ul>
</div>
</nav>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/CSS/bootstrap.min.CSS">
</HTML>
自己修好了！
从悬停元素和下拉菜单中删除了所有边距和填充+向下拉菜单本身添加了悬停类以确保它保持可见。
以上是大佬教程为你收集整理的Bootstrap Nav Subnav 在悬停鼠标移动时消失全部内容，希望文章能够帮你解决Bootstrap Nav Subnav 在悬停鼠标移动时消失所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。