悬停上的边框效果导致复选框出现问题

Question

我有一个absolute定位的元素，其中包含带有复选框的列表项。当我将鼠标悬停在列表项之一上时，border-bottom样式会导致其他复选框移动。我试图在列表项中添加两倍于底部的填充，以解决此问题，但这是行不通的。有人可以告诉我怎么做吗？谢谢。

提琴：https://jsfiddle.net/n2fole00/vn6sg1d0/

html

<h1 style="text-align:center">A tricky filter UI</h1>
<div class="filter-group-container">
  <div class="filter-container filter-list1" data-filter-name="price">
    <h4>Price</h4>
    <ul #id="list1">
      <li><input id="price1" type="checkbox"> <label for="price1">€0-50</label></li>
      <li><input type="checkbox"> €50-100</li>
      <li><input type="checkbox"> €100-200</li>
      <li><input type="checkbox"> €200-500</li>
      <li><input type="checkbox"> €500-1000</li>
    </ul>
  </div>

  <div class="filter-container filter-list2" data-filter-name="material">
    <h4>Material</h4>
    <ul #id="list2">
      <li><input id="material1" type="checkbox"> <label for="material1">Gold</label></li>
      <li><input id="material2" type="checkbox"> <label for="material2">Silver</label></li>
      <li><input id="material3" type="checkbox"> <label for="material3">Platnum</label></li>
    </ul>
  </div>

  <div class="filter-container filter-list3" data-filter-name="gender">
    <h4>Gender</h4>
    <ul #id="list3">
      <li><input id="gender1" type="checkbox"> <label for="gender1">Male</label></li>
      <li><input id="gender2" type="checkbox"> <label for="gender2">Female</label></li>
    </ul>
  </div>
</div>
<p style="text-align:center">Resize me!</p>

CSS

/* Mobile first */

h4 {
  line-height: 32px;
  margin: 0;
  border-bottom: 1px solid grey;
}

.filter-container > ul.show {
  display: block;
}

.filter-container > ul {
  list-style-type: none;
  margin-left: 17px;
  padding: 0;
  margin: 0;
  line-height: 32px;
}

.filter-container > ul > li {
  border-bottom: 1px solid grey;
}

@media (min-width: 480px) {
  .filter-container h4 {
    border-bottom: none;
    /* stop elements moving on hover */
    padding-bottom: 2px;
  }
  .filter-container > ul.show {
    display: flex;
  }
  .filter-container > ul > li {
    display: flex;
    align-items: center;
    margin: 5px 10px;
    border-bottom: none;
  }
  .filter-container > ul > li:hover {
    border-bottom: 1px solid grey;
  }

  .filter-container h4:hover {
    border-bottom: 1px solid grey;
    /* stop elements moving on hover */
    padding-bottom: 1px;
  }

  .filter-container label {
    cursor: pointer;
  }
  .filter-group-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
  }
  .filter-container {
    display: inline-block;
    margin: 0 10px;
    padding: 0 5px;
    cursor: pointer;
  }
  .filter-container > ul {
    display: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    padding: 0;
    top: 40px;
    left: 0;
    right: 0;
  }
}

jQuery

$('.filter-container').on('click', function() {
  $('.filter-container').children('ul').removeClass('show');
  $(this).children('ul').addClass('show');
});