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;

}