как добавить эффекты наведения в меню начальной загрузки

Question

Привет, ребята, я новичок в веб-разработке, и я пытаюсь добавить эффект наведения в мое навигационное меню, что-то вроде первого примера в этой ссылке: https://codepen.io/Calloumi/pen/vndlH

Я пытался реализовать ту же идеюк моему загрузочному html навигационному меню, однако мое ведет себя немного по-другому, кажется, что только нижняя граница перемещается внутрь, и когда я наведите курсор мыши на Ссылки и наведите на них курсор, также переместит мой пункт меню вверх.я не уверен, что нужно добавить / изменить, чтобы он работал так же

.navbar-light .navbar-nav .nav-link {
  text-transform: uppercase;
  text-align: center;
  font-size: 13px;
  text-decoration: none;
  background: white;
  color: black;
  font-family: "open-sans";
  transition: 0.3s ease;
  border-top: 4px solid #FFFFFF;
  border-bottom: 4px solid #FFFFFF;
  padding: 20px 0;
  margin: 0 20px;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
  border-top: 4px solid #000000;
  border-bottom: 4px solid #000000;
  padding: 6px 0px;
  background: #11ADE8;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-md navbar-light ">

  <div class="container-fluid">

    <a class="navbar-brand " href="#">
      <img src="images/logoblue.png" alt="">
    </a>
    <button class="navbar-toggler first-button darken-3" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
       <div class="animated-icon1"><span></span><span></span><span></span></div>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Booking</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Prices</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact us</a>
        </li>
      </ul>
</nav>

Любая помощь очень важна для достижения того же эффекта при наведении на мое меню навигации.

Answer 1

EDIT: вам нужно удалить класс .navbar-light из стиля :hover и использовать display:inline для navbar-nav, он будет работать как задумано.Ниже исправлен код из вашего кодепа в комментариях.

 .navbar-light .navbar-nav .nav-link {
    display: inline;
    text-transform: uppercase;
    font-size: 13px;
    text-decoration: none;
    color: black;
    font-family:"open-sans";
    transition: 0.3s ease;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin: 0 20px;
    padding: 20px 0;

}

 .navbar-nav .nav-link.active,
 .navbar-nav .nav-link:hover {
    border-top: 4px solid #000000;
    border-bottom: 4px solid #000000;
    background:#11ADE8;
    padding: 6px 0;
}

Answer 2

У вас есть безумное количество HTML для простой навигации.Кодекс, который вы связали, делает это правильно.Набор ссылок (т. Е. Тегов привязки), заключенных в элемент nav.

Правильное решение здесь - упростить ваш HTML.

nav {
  margin-top: 40px;
  padding: 24px;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  background: #3fa46a;
}

nav a {
  transition: 0.3s ease;
  background: #3fa46a;
  color: white;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  padding: 20px 0;
  margin: 0 5px;
  font-size: 17px;
}
nav a:hover {
  border-top: 4px solid white;
  border-bottom: 4px solid white;
  padding: 6px 0; 
}

<nav>
    <a href="#">Home <span class="sr-only">(current)</span></a>
    <a href="#">Services</a>
    <a href="#">Products</a>
    <a href="#">Booking</a>
    <a href="#">Prices</a>
    <a href="#">Gallery</a>
    <a href="#">Contact us</a>
</nav>