Bordure inférieure CSS sur la barre de navigation

Question

J'ai une barre de navigation et lorsque je survole un élément de la liste, j'ai ajouté une ligne rouge en bas mais je souhaite déplacer cette ligne rouge sous le titre (par exemple « Services »), une idée de comment y parvenir ?

J'ai ajouté un petit exemple dans le codepen afin que vous puissiez facilement inspecter le code HTML et CSS

header {
  background-color: lightblue;
  padding-top: 1rem;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

header nav {
  min-width: 50%;
}

header nav ul {
  margin: 0;
  height: 100%;
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header li:hover {
  height: 100%;
  border-bottom: 2px solid red;
}

<header>
  <a href="/">
    <p>Whatever logo</p>
  </a>
  <nav>
    <ul>
      <li>About us</li>
      <li>Services</li>
      <li>Pricing</li>
      <li>Blog</li>
    </ul>
  </nav>
  <a href="/">CONTACT</a>
</header>

Lien pour afficher le code

Answer 1

Je pense simplement donner à tous les éléments de la liste la même hauteur que l'en-tête.

Comme ça :-

header {
  background-color: lightblue;
  padding-top: 1rem;
  height: 3rem;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

header nav {
  min-width: 50%;
  height : 100%;
}

header nav ul {
  margin: 0;
  height: 100%;
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header li{
  height: inherit;
}

header li:hover {
  border-bottom: 2px solid red;
}

  
    

      
Whatever logo
      

        

          
About us
          
Services
          
Pricing
          
Blog
        
      
      CONTACT
    
  

Answer 2

Vous pouvez fixer la hauteur de l'en-tête et vous pouvez également fixer la hauteur des éléments de la barre de navigation. De plus, vous rencontrez un problème où l'élément li se déplace lorsqu'il est survolé. Vous pouvez également résoudre ce problème en ajoutant toujours une bordure de couleur transparente à l'élément afin que la hauteur totale de l'élément ne change pas au survol.

C'est un CSS corrigé

header {
  background-color: lightblue;
  position: sticky;
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-around;
}

header nav {
  min-width: 50%;
}

header nav ul {
  margin: 0;
  height: 100%;
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

header li {
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  height: 60px;
}

header li:hover {
  border-bottom: 2px solid red;
}

https://codepen.io/swarajgk/pen/JjZewPo?editors=1100