Die Navigation im header-Bereich ist noch nicht ganz vollständig dokumentiert. Dieser Artikel soll das Thema nun vorerst abschließen…
Navigation 2 einblenden:
Die zweite Navigation wurde bereits im letzten Artikel in der Datei “600.css“ eingeblendet.
nav2{
position: absolute;
top: 10px;
left: 20px;
}Für den Dropdown-Effekt müssen aber natürlich auch die notwendigen Gestaltungen für den Rest der Navigation vorgenommen werden…
Listen als Blockelement:
Die Listenpunkte der zweiten Navigation müssen als Block-Element festgelegt werden.
nav2 li {
display: block;
list-style-type: none;
padding: 3px;
}Verschachtelte Liste ausblenden:
Für den Dropdown-Effekt müssen die verschachtelten Listen wieder ausgeblendet werden. Hier wieder mit einem Negativwert von -9999 Pixel.
nav2 li ul {
position: absolute;
left: -9999px;
top: -9999px;
}Hover-Effekt gestalten:
Nun wird der Hover-Effekt gestaltet…
nav2 li:hover ul {
left: 10px;
top: auto;
display: block;
width: 210px;
height: auto;
}Hyperlinks gestalten:
nav2 a:link {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav2 a:visited {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
nav2 a:hover {
background-color: red;
color: black;
display: block;
text-decoration: none;
}
nav2 a:focus {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
nav2 a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
}