Содержимое корзины покупок при наведении курсора

Question

Я настраиваю дочернюю тему для темы WooCommerce Storefront, к которой я добавил Bootstrap 4. У меня есть значок корзины покупок в заголовке, который показывает список товаров в корзине, когда вы наводите на нее курсор мыши. Он вложен в контейнер, строку, столбцы и несколько упаковочных элементов. Значение ul для продуктов изначально устанавливается на "display: none" и "opacity: 0" и изменяется на "display: block" и "opacity: 1", когда кто-то наводит курсор на значок корзины покупок. Проблема теперь в том, что список исчезает, как только я перемещаю курсор за пределы строки, поэтому я не могу добраться до конца списка. Когда я изменяю высоту ряда, я могу опуститься еще ниже. Изменение высоты любого из упаковщиков div не имеет значения.

К сожалению, я не смог воссоздать ситуацию в JSFiddle - когда я пытался, список работает просто отлично. У меня сейчас нет живого сайта. Вот мой JSFiddle в любом случае. По крайней мере, это может дать вам представление о моих общих настройках. На моем реальном сайте вы не сможете переместить курсор за первый элемент в списке.

Я пытался играть с переполнением, но это не помогло. Не то, чтобы я не мог видеть весь список - он отлично отображается при наведении - но я не могу добраться до всего этого с помощью мыши. Я чувствую, что это должно быть связано с рядом, но я не могу понять, что это такое. Есть идеи?

Вот мой код из скрипки:

<div class="header-section">
  <div class="container">
    <div class="row">
      <header class="col-md-2 site-header">
        Logo & Brand
      </header>
      <div class="my-header-wrap col-md-10">
        <div class="header-right" >
          <form>
            <input class="d-inline" name="search" placeholder="Search for products" type="text">
          </form>
          <div class="header-cart float-right text-right d-none-xs no-gutter">
                    <div class="header-cart-block">
                        <div class="header-cart-inner">
                            <a class="cart-contents text-right" href="#" title="View your shopping cart">
                        <i class="fa fa-shopping-cart"></i>
                      </a>
                <ul class="my-site-header-cart menu list-unstyled">
                  <li>Item 1</li>
                  <li>Item 1</li>
                  <li>Item 1</li>
                  <li>Item 1</li>
                  <li>Item 1</li>
                  <li>Item 1</li>
                  <li>Item 1</li>
                  <li>Item 1</li>
                  <li>Item 1</li>
                </ul>
              </div>
            </div>
          </div>  
        </div>
      </div>
      <div class="header-right-rectangle d-none d-md-block">      
      </div>
    </div>
  </div>  
</div>

а также:

.row {
  background: #f8f9fa;
  margin-top: 20px;
  height: 70px;
}

.site-header, .header-right {
    margin-left: 0;
    padding-left: 0;
    margin-right: 0;
    padding-right: 0;
    border: solid 1px #6c757d;
    display: inline-block;
}

.header-right {
    width: 100%;
}

.my-header-wrap {
    position: absolute;
    right: 0;
    margin-left: 0;
    padding-left: 0;
    display: inline-block;
}

.header-cart {
    position: relative;
    color: #000;
    display: inline-block;
    top: 0;
}

.header-cart-block {
    display: inline-block;
    padding: 10px 10px 5px 10px;
    border: 2px solid #F1F1F1;
    border-radius: 7px;
    margin-bottom: 15px;
    margin-right: 15px;
}

.header-cart-inner {
    display: inline-block;
    position: relative;
}

.my-site-header-cart {
    position: absolute;
    top: 100%;
    border: 1px solid #CECECE;
    display: none;
    opacity: 0;
    z-index: 999999;
    background-color: #fff;
    min-width: 330px;
    right: -50%;
}

.header-cart-inner:hover .my-site-header-cart,
.header-cart-inner:active .my-site-header-cart {
    display: block;
    opacity: 1;
}

.header-right form {
  width: 100px;
  display: inline-block;
}

.header-right-rectangle {
    padding-right: 0;
    border: 2px #6d6d6d solid;
    z-index: 1 !important;
    height: 70px;
    top: -20px;
    right: 0 !important;
    position: relative;
    width: 100%;
}