当 hover 离开时，boostrap 下拉菜单闪烁

Question

我有一个 minicart 模态，当你 hover 在它上面时，它看起来很好。 但是当你hover off时，有一个来回闪烁的闪烁，不知道如何解决。

我更新了代码以包含更多菜单 html 结构和下拉菜单样式的完整 CSS。

演示站点可以在这里找到 - https://whileymai-dev.myshopify.com/password访问密码是 - demostore2020

这是 html

        <div class="col-md-4 col-xs-12 col-sm-4">
          <ul class="top-menu list-inline float-right mt-3 mb-3">
            <li class="nav-item dropdown list-inline-item mini-cart">
              <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" data-target="#cartModal" aria-haspopup="true" aria-expanded="false" >
                Cart
              </a>
              <div class="dropdown-menu" id="cartModal" aria-labelledby="navbarDropdown">
                  <div class="dropdown-item-text">
                    {% include 'minicart' %}
                  </div>
              </div>
            </li>
          </ul>
        </div>

这是 CSS

/*=================================================================
  Navbar Dropdown
==================================================================*/
.navbar-nav .dropdown .dropdown-menu a {
  color: #222;
  font-size: 12px;
  border: 1px solid transparent;
  display: block;
  padding: 8px 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: .3s all;
}

.navbar-nav .dropdown .dropdown-menu a:hover {
  background-color: #000;
  color: #fff;
}

.dropdown-item-text {
    display: block;
    padding: 0.5rem 0.5rem;
    color: #212529;
}

.dropdown:hover .dropdown-menu {
  display: none;
  opacity: 1;
  display: block;
  visibility: visible;
  color: #777;
  top: -10px;
  right: -76px;
  max-height: 500px;
  height: 500px;
  overflow: scroll;
  -webkit-animation: fadeIn 0.7s;
  animation: fadeIn 0.7s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.dropdown .dropdown-menu {
  border-radius: 0;
  padding: 15px;
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: .3s all;
  position: absolute;
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(0px);
          transform: translateY(00px);
  transition: visibility 0.2s, opacity 0.2s, -webkit-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
  transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
  transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99),
  -webkit-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
}

.dropdown .dropdown-menu.full-width {
  max-width: 1200px;
  left: -150px;
  top: 35px;
  border: 0;
  width: max-content;
}

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
}

.dropdown-divider {
  height: 0;
  margin: 0;
  overflow: hidden;
  border-top: 0px solid #e9ecef;
}

Answer 1

想通了 - 我有 2 个 CSS 课程； 导致我已删除的问题。

顶部：-10px； 右：-76px；