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