Vertikales CSS FlyOut Menü Tutorial

Dieses Flyout Menü habe ich ebenfals überarbeitet. Es funktioniert wie das Horizontales Flyout Menü, nur das die Sub Navigation seitlich erscheint.


Der HTML Code


Und der CSS Code
.navigation
{
	width:120px; height:180px;
	padding:0px; margin:0px;
	background-color:#333333;
	z-index:50; position:relative; 
	top:0px; left:0px;
	list-style:none;
}
	
.navigation a
{
	color:#333333; text-decoration:none;
}
	
.navigation a:hover
{ 
	color:#FFFFFF; text-decoration:none;
}

.navi_top
{
	width:120px; height:30px;
	background:#CCC;
	float:left;
}

.toplink
{
	width:120px; height:30px;
	float:left;
	line-height:30px; 
	font-size:16px;
	padding:0 0 0 10px;
}
	
.navi_sub
{
	width:120px; height:auto;
	position:relative;
	left:120px; top:-30px;
	display:none;
	list-style:none;
	margin:0px;
	padding:0px;
}	

.link
{
	width:110px; height:30px;
	float:left; line-height:30px;
	background-color:#666666;
	padding:0 0 0 10px;
}

.link:hover
{
	background:#CCCCFF;
}

.navi_top:hover .navi_sub
{
	display:block;
}