Question

我正在使用bootstrap 4并创建了一个全宽多列下拉菜单，因为我需要在我的项目中使用它。我已经为它添加了悬停效果，效果很好。当我将鼠标悬停在链接上时，会出现下拉菜单，但它会消失太快，并且不会让我点击下拉列表中的任何链接。我使用带有引导程序附带的类navbar-nav的ul，并在其中添加了以下代码。

＆＃13;

.ths-dropdown:hover>.ths-dropdown-menu {
  display: block;
}

.ths-header__nav {
  display: none;
  position: absolute;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
  z-index: 1000;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: solid 1px #e5e9ec;
  border-bottom: solid 1px #e6e9f1;
}

.ths-header__nav>.container {
  flex-wrap: wrap;
  justify-content: space-around;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.ths-header__nav>.container ul {
  margin: 15px 0;
  flex-direction: column;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@media only screen and (max-width: 768px) {
  .ths-header__nav>.container ul {
    width: 50%;
  }
}

.ths-header__nav>.container ul li {
  text-align: center;
}

.ths-header__nav>.container ul li:not(:first-child) {
  margin-top: 8px;
}

.ths-header__nav>.container ul li a:hover {
  color: #3482e2;
  text-decoration: underline;
}

@media (min-width: 1210px) {
  .ths-container {
    width: 1200px;
    max-width: 100%;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<li class="ths-dropdown">
  <a href="#" class="nav-link text-dark" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link Title</a>
  <div class="ths-header__nav ths-dropdown-menu" aria-labelledby="navbarDropdown">
    <div class="container" style="padding-left:0px; padding-right:0px; margin-left:0px; margin-right:0px;">
      <ul style="list-style:none;">
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
      </ul>
      <ul style="list-style:none;">
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
      </ul>
      <ul style="list-style:none;">
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
      </ul>
      <ul style="list-style:none;">
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
      </ul>
      <ul style="list-style:none;">
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
        <li><a href="#" class="text-dark">Category</a></li>
      </ul>
    </div>
  </div>
</li>

＆＃13;

我试图谷歌问题，发现问题发生在li和dropdown ul之间的差距较小时。任何人都可以检查代码，让我知道我应该在哪里进行更改以解决此问题。

Bootstrap 4菜单消失得太快

0 个答案: