Border Bottom Active

Tutorial wurde erstellt von: Bluevacci.de

Bei diesem Navigations Menü ist der List-Style none, somit wird kein Bullet Typ angezeigt. Durch die Anweisung display:inline werden alle Links der Navigation horizontal ausgerichtet. Mit der Anweisung id="active" in dem Aktiv anzuzeigendem Link wird durch ein Border unter dem Link angezeigt.

Beispiel anzeigen 

CSS:

#hList_00_b ul {
	list-style-type: none;
}
#hList_00_b li {
	display: inline;
	padding: 0 10px;
}
#hList_00_b li a {
	color: #56607E;
	padding: 5px 0;
	text-decoration: none;
}
#hList_00_b a:hover {
	text-decoration: none;
	border-bottom: 3px #B4297A solid;
}
#hList_00_b a#active {
	text-decoration: none;
	border-bottom: 3px #56607E solid;
}

HTML:

 
<ul id="hList_00_a">
  <li><a id="active" href="#">01. MenüLink</a></li>
  <li><a href="#">02. MenüLink</a></li>
  <li><a href="#">03. MenüLink</a></li>
  <li><a href="#">04. MenüLink</a></li>
  <li><a href="#">05. MenüLink</a></li>
</ul>