Navigations Bar

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.

Beispiel anzeigen 

CSS:

*
{
	margin:0;
	padding:0;
}
#hList_03 ul {
	list-style-type: none;
	padding: 5px 0;
	background: #56607E;
}
#hList_03 li {
	display: inline;
	padding: 5px 10px;
}
#hList_03 li a {
	color: #E9EEF8;
	text-decoration: none;
}
#hList_03 li:hover {
	color:#fff;
	background: #B4297A;
}

HTML:

 
<ul id="hList_03">
  <li><a 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>