boostrap dropdown-menu flickering when hover away

Question

I have a minicart modal that when you hover over it, it appears fine. But when you hover off, there is a flickering that flashes back and forth and not sure how to fix it.

I have updated the code to include more of the menu html structure and a complete CSS of the dropdown menu styling.

The demo site can be found here - https://whileymai-dev.myshopify.com/password PW to access is - demostore2020

Here is the 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>

here is the 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

Figured this out - I had 2 CSS classes; causing the issue which i have removed.

top: -10px; right: -76px;