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
<ul class="navigation">
    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
            <li><a href="" class="link">1</a></li>
            <li><a href="" class="link">2</a></li>
            <li><a href="" class="link">3</a></li>
            <li><a href="" class="link">4</a></li>
            <li><a href="" class="link">5</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
			<li><a href="" class="link">1</a></li>
            <li><a href="" class="link">2</a></li>
            <li><a href="" class="link">3</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
            <li><a href="" class="link">1</a></li>
            <li><a href="" class="link">2</a></li>
            <li><a href="" class="link">3</a></li>
            <li><a href="" class="link">4</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
            <li><a href="" class="link">1</a></li>
            <li><a href="" class="link">2</a></li>
            <li><a href="" class="link">3</a></li>
            <li><a href="" class="link">4</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
        <ul class="navi_sub">
            <li><a href="" class="link">1</a></li>
        </ul>
    </li>

    <li class="navi_top"><a href="" class="toplink">Link</a>
    </li>
</ul>

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;
}