Navigation (erweitert)

Basics

Ein Vorteil einer Navigation mit den HTML-Tags <ul> und <li> ist die erweiterte Möglichkeit zur Formatierung der Elemente.
Mit CSS können somit die Tags <li> und <a> angesprochen und formatiert werden.

Beispiel "erweiterte Navigation"

HTML

CSS

					
						nav {
							width: 100%;
							float: left; /* Ist notwendig, damit der Container nicht "zusammenbricht" und die Hintergrundfarbe angezeigt wird. */
							padding: 0;
							background-color: #9A0000;
						}

						ul.nav-erweitert {
							margin: 0;
							padding: 0;
							list-style: none;
						}
						
						ul.nav-erweitert li {
							padding: 0;
							float: left; /* Ist notwendig, dass die li-Elemente nebeneinander stehen. */
						}
						
						ul.nav-erweitert li a {
							color: #FFF;
							text-decoration: none;
							padding-top: 10px;
							padding-right: 20px;
							padding-bottom: 10px;
							padding-left: 20px;
							border-right: 1px solid #FFF; /* Die Rahmenlinie fungiert als Trennlinie. */
							background-color: #9A0000;
							float: left; /* Ist notwendig, damit padding auf allen vier Seiten funktioniert. */
						}
						
						ul.nav-erweitert li a:hover {
							color: #000;
							background-color: #4AA00C;
						}