CSS FlyOut Menü Tutorial

So hier erkläre ich euch nun das auf CSS basierenden Hover Menü
Ich hab das Flyout Menü noch einmal überarbeitet, da es doch einige Probleme bei der Darstellung in den älteren IE Versionen gab.


Die Funktion ist eigentlich ganz simpel zu erklären. Fährt man mit der Maus über einen Menüpunkt (Hover), wird das Submenü (Display:block) eingeblendet. Hier seht ihr schon mal wie das Menü aussehen könnte.



Der HTML Code




Und hier ist der CSS Code
.navigation
{
	width:auto; height:30px; 
	margin:0px auto;	
	padding:5px 10px 0 10px; 
	line-height:30px; 
	z-index:20;
	font-size:12px;
	margin-top:0px;
	position:relative;
	background:#000;
	
}
.navigation li, .navigation ul
{
	list-style:none;
	padding:0px;
	margin:0px;
}

.navigation li
{
	float:left;	
}

.navigation, .navigation a
{
	color:#fff; 
	text-decoration:none;
	font-size:14px;
} 

.toplink
{
	height:30px; float:left; 
	padding:0 20px 0 20px;
	font-size:18px;
}

.toplink:hover
{
	color:#0488d3; cursor:pointer;
}

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

.navi_sub
{
	height:auto; width:140px;
	display:none; clear:left; 
	position:absolute; 
	top:35px;
	margin:0px auto;
}

.link
{
	width:120px; height:25px;
	font-size:12px;
	padding:0 0 0 20px;
	float:left;
	background-color:#000;
	opacity:0.8;
}

.nav_clear
{
	clear:left;
}

.link:Hover
{
	color:#000;
	background:#ccc;
}

.navigation li:hover .navi_sub
{
	display:block; 
}