So hier erkläre ich euch nun das auf CSS basierenden Hover Menü

Es ist eigentlich ganz einfach, das untere Menü wird ausgeblendet indem man
eine Position angibt, die sich weit außerhalb des Bildschirms befindet.
Bei überfahren des Menüs soll es dann wieder auf die ursprüngliche Position zurück kommen.


Hier seht ihr schon mal wie es aussehen soll



Der CSS Code
<style type="text/css">
.navigation
{
width:600px; height:30px; /*Breite und Höhe der Navigationsleiste*/
margin:0px auto; /*mittige ausrichtung*/
background-color:#666666;
line-height:30px;
z-index:1;
list-style:none; /*List-Style ausblenden*/
padding:0px; /*Innenabstände auf 0px*/
}

.navigation a
{color:#000000; text-decoration:none} /*Link Farbe*/

.navigation a:Hover
{color:#CCCCCC; text-decoration:none}

.navi_top
{
width:150px; height:30px; /*Breite und Höhe der Buttons in der Navileiste*/
background-color:#999;
float:left; /*Links nebeneinander anordnen*/
}

.navi_top span
{
padding-left:20px;
font-size:18px;
}

.toplink
{
width:150px; height:30px;
float:left;
}

.navi_sub
{
height:auto; width:auto;
display:none; /*Hier wird das Sub-Menü ausgeblendet*/
padding:0px;
position:relative; /*Relative Positionierung, bezogen auf die Navigations Position*/
top:0px; left:0px; /*Damit das Sub-Manü auch untereinander angeordnet wird*/
clear:left;
}

.navi_sub span
{
font-size:12px;
}

.navi_sub li
{
padding:0px;
list-style:none; /*List-Style im Sub-Menü ausblenden*/
}

.link
{
width:150px; height:30px;
float:left;
background-color:#999999;
}

.link:Hover
{
background-color:#333333;
}

.end_navi
{
height:10px; width:150px;
float:left; background-color:#666666;
}
.navi_top:hover .navi_sub
{
display:block; /*Damit das Sub-Manü beim Hover auch angezeigt wird*/
}
</style>


Der HTML Code
<ul class="navigation">
<li class="navi_top"><a href="" class="toplink"><span>link</span></a>
<ul class="navi_sub">
<li><a href="" class="link"><span>link</span></a></li>
<li><a href="" class="link"><span>link</span></a></li>
<li><a href="" class="link"><span>link</span></a></li>
<li><a href="" class="link"><span>link</span></a></li>
<div class="end_navi"></div>
</ul>
</li>

<li class="navi_top"><a href="" class="toplink"><span>link</span></a>
<ul class="navi_sub">
<li><a href="" class="link"><span>link</span></a></li>
<li><a href="" class="link"><span>link</span></a></li>
<li><a href="" class="link"><span>link</span></a></li>
<div class="end_navi"></div>
</ul>
</li>

<li class="navi_top"><a href="" class="toplink"><span>link</span></a>
<ul class="navi_sub">
<li><a href="" class="link"><span>link</span></a></li>
<li><a href="" class="link"><span>link</span></a></li>
<div class="end_navi"></div>
</ul>
</li>

<li class="navi_top"><a href="" class="toplink"><span>link</span></a>
<ul class="navi_sub">
<li><a href="" class="link"><span>link</span></a></li>
<li><a href="" class="link"><span>link</span></a></li>
<li><a href="" class="link"><span>link</span></a></li>
<div class="end_navi"></div>
</ul>
</li>

</ul>
>