[CSS] Drop Down Menü *updated* ✤✤✤

EDIT Das Tutorial hat ebenfalls ein kleines MakeOver erhalten, inklusive Demo und etwas ausführlicher! Vielleicht ist es euch ja schon aufgefallen, wenn ihr mal bei KreaTief?! oder Tutorials gucken wollt ^^ Das Drop-Down-Menü =D
Und das alles verdanke ich dem Verfasser dieses Posts!
Ich bin total happy damit und dacht ich schreib euch hier trotzdem noch eine eigene Version des Tutorials, welches ich euch verlinkt habe.
Ich empfehle euch das zuerst in einem Testblog auszuprobieren, es kann sonst schnell mal unübersichtlich werden, wenn ihr euch das nach jedem Schritt mal angucken könnt, ist das wesentlich einfacher ^^

DEMO >>

So schaut's dann am Ende aus. Das ganze lässt sich mit CSS natürlich auch noch bisschen verschönern, aber das werde ich in diesem Post nicht erklären.

Das alles kommt in ein HTML-Gadget unterhalb des Headers, ersetzt also jegliche Seiten-Gadgets oder Linklisten.
Ihr startet foldendermassen:
<div id="nav1"> <ul class="level1"> /*hier folgt der restliche Code*/ </ul> <div>
Habt ihr Seiten, die bloss auf einer Ebene sind, dann fügt einfach folgendes ein:
<li class="level1-li"><a href="Link">Anzuzeigender Text</a></li>

Wollt ihr ein Drop-Down geht das so:
<li class="level1-li"><a href="Link">Text mit Drop</a> <ul class="level2"> <li><a href="Link">Drop 1</a></li> <li><a href="Link">Drop 2</a></li> <li><a href="Link">Drop 3</a></li> </ul> </li>
Achtet darauf, dass der List-Tag, diesmal nicht nach dem Link geschlossen wird, sondern erst am Ende. Die zweite Ebene, also das Drop-Down ist sozusagen eingeschoben. Natürlich könnt ihr beliebig viele Drops machen.

Das ist das, was in das Gadget kommt. Um dem ganzen allerdings eine Form zu geben, fügt man CSS hinzu. Das macht ihr im Vorlagendesigner bei Erweitert unter CSS hinzufügen.

Dort kommt folgendes ein. Die Farben sind natürlich ganz euch überlassen. Ihr könnt entweder Namen, Codes oder einfach Transparent eingeben, wenn ihr keine Farbe wollt. Schriftgrösse und Font habe ich euch ebenfalls markiert.
#nav1 {
width:100%;
background: FARBE DER GANZEN LEISTE;
height:25px;
text-align:center;
margin:0;
position:relative;
z-index:20;
}

#nav1 ul {
display:inline-block;
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
text-align:left;
}

#nav1 li {
margin:0;
padding:0;
list-style:none;
clear:both;
float:none;
}

#nav1 ul ul {
position:absolute;
left:-9999px;
}

#nav1 ul li.level1-li {
float:left;
display:block;
position:relative;
clear:none;
}

#nav1 ul {
background: HINTERGRUND DER EINZELNEN MENÜPUNKTE;
}

#nav1 ul ul{
background: FARBE DER DROPS;
}

#nav1 a {
display:block;
font:normal SCHRIFTGRÖSSE in px FONT;
color:black;
line-height:25px;
text-decoration:none;
padding: 0 15px 0 15px;
outline:none;
}

#nav1 ul li:hover > ul {
visibility:visible;
left:0;
top:25px;
}

#nav1 li:hover > a, #nav1 ul li:hover > a {
background-color: HOVER-FARBE;
}

#nav1 li a {
border: none;
}

#nav1 ul, .tabs-outer {
overflow:visible;
}

.main-outer {
z-index:10;
}

.tabs-outer {
z-index:11;
}

Joa, und das war's schon ^^