Bootstrap Nav Subnav 在悬停鼠标移动时消失答案

【问题标题】：Bootstrap Nav Subnav Disappearing on Hover Mouse MoveBootstrap Nav Subnav 在悬停鼠标移动时消失
【发布时间】：2021-01-25 00:17:13
【问题描述】：

我有一个带有下拉子导航的引导导航栏，它会在悬停时显示 - 但是当我尝试将鼠标向下移动到子导航时，它会在我到达之前消失。如何确保它不会消失，而是随着鼠标向下移动而持续存在？

这仅适用于桌面。

谢谢！

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>

【问题讨论】：

标签： css bootstrap-4 hover navbar

【解决方案1】：

自己解决了！

从悬停元素和下拉菜单中删除所有边距和填充 + 向下拉菜单本身添加悬停类以确保其保持可见。

【讨论】：