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;
}