嗨，我的导航栏中有一个奇怪的问题，当你将鼠标悬停在第一个下拉链接和第二个下拉链接之间时，会出现奇怪的抖动。
有人能帮我解决这个问题吗？
在这里看到它发生在https://jsbin.com/fudoyirazi/1/edit?html，输出
我尝试过在li元素中添加边距和填充，但这没有帮助，因为菜单项1和菜单项2之间总是有一个交集，这会导致菜单尝试打开并抖动。
这是我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Funny issue</title>
<style>
.main-nav {
}
.main-nav,
.main-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.main-nav > ul > li {
position: relative;
white-space: nowrap;
float: left;
}
.main-nav a {
display: block;
position: relative;
color: #413e66;
padding: 10px 15px;
transition: 0.8s;
font-size: 14px;
font-family: "Open Sans", sans-serif;
text-transform: uppercase;
font-weight: 600;
}
.main-nav a:hover,
.main-nav .active > a,
.main-nav li:hover > a {
color: #1bb1dc;
text-decoration: none;
}
.main-nav .drop-down ul {
display: block;
position: absolute;
left: 0;
top: calc(100% - 30px);
z-index: 99;
opacity: 0;
visibility: hidden;
padding: 10px ;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: ease all 0.5s;
}
.main-nav .drop-down:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.main-nav .drop-down li {
min-width: 180px;
position: relative;
}
.main-nav .drop-down ul a {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #065e77;
}
.main-nav .drop-down ul a:hover,
.main-nav .drop-down ul .active > a,
.main-nav .drop-down ul li:hover > a {
color: #1bb1dc;
}
.main-nav .drop-down > a:after {
content: "f107";
font-family: FontAwesome;
padding-left: 10px;
}
.main-nav .drop-down .drop-down ul {
top: 0;
left: calc(100% - 30px);
}
.main-nav .drop-down .drop-down:hover > ul {
opacity: 1;
top: 0;
left: 100%;
}
.main-nav .drop-down .drop-down > a {
padding-right: 35px;
}
.main-nav .drop-down .drop-down > a:after {
content: "f105";
position: absolute;
right: 15px;
}
</style>
</head>
<body>
<nav class="main-nav d-none d-lg-block " >
<ul class="float-lg-left bg-white" id="logo_ul" >
<li class="drop-down ">
<a id="pads" href="{{route('view-published-pages')}}about-us">first drop down</a>
<ul>
<li class="drop-down">
<a href="{{route('view-published-pages')}}Global-Presence">Global Presence</a>
<ul>
<li><a >cocoa loops </a></li>
<li><a >cocoa loops </a></li>
<li><a >cocoa loops </a></li>
</ul>
</li>
</ul>
</li>
<li class="drop-down ">
<a id="pads" href="{{route('view-published-pages')}}about-us">second dropdown</a>
<ul>
<li class="drop-down">
<a href="{{route('view-published-pages')}}Global-Presence">Global Presence</a>
<ul>
<li><a >fruity loops </a></li>
<li><a >fruity loops </a></li>
<li><a >fruity loops </a></li>
<li><a >fruity loops </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
问题在于下拉列表的移动。当鼠标回到原位时，它会从鼠标下方经过，因此它会再次被激活。
为了避免这种情况，您可以更改此规则
.main-nav .drop-down ul { padding: 0;}
(因为您的下拉列表太宽。它不应该比其父项宽，否则它会从您的鼠标下方通过(
您还有一个问题，当您将鼠标悬停在div的右下角时，您的第二级下拉菜单会被激活并迅速停用。这一切都是出于同样的原因，因为你的第一个下拉列表经过鼠标下方，所以它会激活第二个下拉列表，并立即关闭它，因为它会移动得更远。我认为你应该考虑把你的第一个下拉菜单隐藏在菜单后面，以避免这个问题。下拉列表不会被鼠标无意中悬停。