Come fare per - Collegamenti di navigazione sul bordo inferiore
Scopri come creare collegamenti di navigazione con bordo inferiore (sottolineato) con CSS.
Collegamenti di navigazione del bordo inferiore
Crea un menu di navigazione
Passaggio 1) Aggiungi HTML:
Esempio
<div class="topnav">
<a href="#home"
class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
Passaggio 2) Aggiungi CSS:
Esempio
/*
Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/*
Style the links inside the navigation bar */
.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;
}
Suggerimento: per creare barre di navigazione reattive e ottimizzate per i dispositivi mobili, leggi il nostro tutorial Come fare per - Navigazione superiore reattiva.
Suggerimento: vai al nostro tutorial CSS Navbar per saperne di più sulle barre di navigazione.