Hur skapa: Navigeringslänkar med bottenram

Föregående sida Responsiv nederstavig navigering
Nästa sida Högerjusterade menylänkar

Lär dig hur du använder CSS för att skapa navigeringslänkar med bottenram (understrykning).

Navigeringslänkar med bottenram

Skapa navigationsmeny

Steg 1 - Lägg till HTML:

<div class="topnav">
  <a href="#home" class="active">Hem</a>
  <a href="#news">Nyheter</a>
  <a href="#contact">Kontakt</a>
</div>

Steg 2 - Lägg till CSS:

/* Lägg till svart bakgrundsfärg på toppnavigeringen */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* Ställ in stilen för länkar i navigationsfältet */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 3px solid transparent;
}
.topnav a:hover {
  border-bottom: 3px solid red;
}
.topnav a.active {
  border-bottom: 3px solid red;
}

Prova själv