Unterer CSS-Rand in der Navigationsleiste

Question

Ich habe eine Navigationsleiste und wenn ich mit der Maus über ein Element in der Liste fahre, habe ich unten eine rote Linie hinzugefügt, aber ich möchte diese rote Linie unter den Titel verschieben (z. B. „Dienste“). Haben Sie eine Idee, wie ich das erreichen kann?

Ich habe im Codepen ein kleines Beispiel hinzugefügt, damit Sie den HTML- und CSS-Code einfach überprüfen können

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>

Link zum Anzeigen des Codes

Answer 1

我认为只需为所有列表元素提供与标题相同的高度即可。

像这样：-

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

您可以修复标题高度，也可以修复导航栏项目的高度。 另外，您还遇到一个问题，即悬停时 li 元素会移动。您还可以通过始终向元素添加透明颜色的边框来解决此问题，这样元素的整体高度在悬停状态下不会改变。

这是固定的CSS

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