Gallery Yuri

Hier haben wir ein Vertikales Css Flyout Menü, welches ihr als Basis benutzen könnt.

Der CSS Code

.main_navi
{
width:120px;/*Breite der Navigation*/
height:180px;/*Höhe der Navigation*/
padding:0px;/*Innenabstände auf 0 setzen*/
float:left; background-color:#333333;
z-index:1;
margin:0px;/*Außenabstände auf 0 setzen*/
}

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

.main_navi a:hover { color:#FFFFFF; text-decoration:none;}

.main_navi li
{
list-style:none;
position:relative;/*Relative Position*/
margin:0px;
float:left; /*Die Top_Links werde von links umflossen*/
}

.main_navi li a
{
width:120px; height:30px;
float:left;
line-height:30px;
padding:0px;
z-index:2;
background-color:#666666;
text-align:center;
font-size180px;
}

.main_navi li ul
{
display:none; /*Blendet die Sub_Navi aus*/
width:120px; height:auto;
list-style:none;/*Ohen Listen Style*/
padding:0px;/*Innenabstände auf 0*/
z-index:3;
position:absolute;/* Absolute Position für die Sub_Navi*/
left:120px; top:0px;/* Positionsangaben von links und von oben*/
}

.main_navi li ul a
{
width:120px;
height:30px;
float:left;
background-color:#999999;
font-size:12px;
}

.main_navi li:hover ul
{
display:block; /*Hier wird die Sub_Navi wieder eingeblendet*/
}

.main_navi li ul a:Hover
{
background-color:#666666; Hintergrund Farbe beim Hover*/
}

Der HTML Code