Как исправить отсутствие границ под моим активным элементом списка?

Question

Я хочу поместить свой активный элемент списка go поверх нижней границы. Z-index не работал, я думаю, что это так из-за позиции элементов списка. Вы знаете, как мне помочь?

Текущая ситуация:

.meer_info_ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  border-bottom: 1px solid #98ab39;
  margin-bottom: 100px;
  text-align: center;
}

.meer_info_li{
  display: inline-block;
  transform: translate(0, 7px);
}

.meer_info_li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
}

.active,  .meer_info_li a:hover:not(.active){
  border-right: 1px solid #98ab39;
  border-left: 1px solid #98ab39;
  border-top: 1px solid #98ab39;
}

<ul class="meer_info_ul">
  <li class="meer_info_li"><a href="#home">Home</a></li>
  <li class="meer_info_li"><a class="active" href="#news">News</a></li>
  <li class="meer_info_li"><a href="#contact">Contact</a></li>
  <li class="meer_info_li"><a href="#about">About</a></li>
</ul>

Идеальная ситуация:

Kindregards, MarioMartin

Answer 1

Если вы удалите overflow: hidden из контейнера <ul> и добавите белую рамку внизу к своему активному элементу списка, вы можете просто сдвинуть элемент списка на 1 пиксель вниз, чтобы он закрыл нижнюю строку. Обратите внимание, что мне также пришлось обновить border-radius, чтобы использовать border-top-radius и border-bottom-radius. Другим улучшением является то, что вы всегда должны устанавливать ширину границы элемента списка в 1px, чтобы предотвратить изменение размера вкладок. Вы можете установить их цвет на transparent, чтобы скрыть их (см .: 1px solid transparent).

.meer_info_ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border-bottom: 1px solid #98ab39;
  margin-bottom: 100px;
  text-align: center;
}

.meer_info_li{
  display: inline-block;
  margin-bottom: -1px;
}

.meer_info_li a {
  display: block;
  border: 1px solid transparent;
  color: #000;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
}

.meer_info_li a.active, .meer_info_li a:hover {
  border: 1px solid #98ab39;
  border-bottom: 1px solid #fff;
}

<ul class="meer_info_ul">
  <li class="meer_info_li"><a href="#home">Home</a></li>
  <li class="meer_info_li"><a class="active" href="#news">News</a></li>
  <li class="meer_info_li"><a href="#contact">Contact</a></li>
  <li class="meer_info_li"><a href="#about">About</a></li>
</ul>

Answer 2

Способ взломать похожий результат.

.meer_info_ul {
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 100px;
  text-align: center;
}
.meer_info_ul:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #98ab39;
}

.meer_info_li{
  display: inline-block;
  transform: translate(0, 7px);
}

.meer_info_li a {
  position: relative;
  display: block;
  color: #000;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}

.meer_info_li a.active,  
.meer_info_li a:hover:not(.active){
  border-right: 1px solid #98ab39;
  border-left: 1px solid #98ab39;
  border-top: 1px solid #98ab39;
}
.meer_info_li a.active {
  z-index: 3;
  background-color: white;
}

<ul class="meer_info_ul">
  <li class="meer_info_li"><a href="#home">Home</a></li>
  <li class="meer_info_li"><a class="active" href="#news">News</a></li>
  <li class="meer_info_li"><a href="#contact">Contact</a></li>
  <li class="meer_info_li"><a href="#about">About</a></li>
</ul>

bootstrap способ управлять похожим результатом.

.meer_info_ul {
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  margin-bottom: 100px;
  text-align: center;
  border-bottom: 1px solid #98ab39;
}

.meer_info_li{
  display: inline-block;
  margin-bottom: -1px;
}

.meer_info_li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.meer_info_li a.active,  
.meer_info_li a:hover:not(.active){
  border-color: #98ab39 #98ab39 #fff;
  background-color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

<ul class="meer_info_ul">
  <li class="meer_info_li"><a href="#home">Home</a></li>
  <li class="meer_info_li"><a class="active" href="#news">News</a></li>
  <li class="meer_info_li"><a href="#contact">Contact</a></li>
  <li class="meer_info_li"><a href="#about">About</a></li>
</ul>

Надеюсь, это поможет.