时间戳

首页 > 解决方案 > 当鼠标放在第一个和第二个链接之间时，CSS导航下拉菜单抖动问题

html - 当鼠标放在第一个和第二个链接之间时，CSS导航下拉菜单抖动问题

问题描述

嗨，我的导航栏中有这个奇怪的问题，当您将鼠标悬停在第一个下拉链接和第二个下拉链接之间时，会发生奇怪的抖动。

谁能帮我解决这个问题？

在这里看到它发生在https://jsbin.com/fudoyirazi/1/edit?html,output

我尝试向 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>

标签： htmlcsstwitter-bootstrap

解决方案

问题在于您的下拉菜单的移动。当它回到原位时，它会从您的鼠标下方经过，因此它会再次被激活。

为避免这种情况，您可以更改此规则

.main-nav .drop-down ul { padding: 0;}
（因为你的下拉菜单太宽了。它不应该比它的父级更宽，否则它会在你的鼠标下方通过）

您还有另一个问题，当您将鼠标悬停在 div 的右下方时，您的第二级下拉菜单被激活并快速停用。这都是出于同样的原因，因为您的第一个下拉菜单会在鼠标下方传递，因此它会激活第二个下拉菜单并立即将其关闭，因为它会移动得更远。我认为您应该考虑将第一个下拉菜单隐藏在菜单后面以避免此问题。下拉菜单不会被您的鼠标无意中悬停。

推荐阅读