Hi there,

I've got a navigation:

http://improve-image.de/workspace/temp/

The second <li> should be UNDER the first one. I don't have any idea, how to solve this. Is this possible? It seems with z-index, it doesn't work. -.-

Thanks for any help.



<div id="contentInner">
<div id="navileft">
<ul id="navigation">
<li id="beraten"><a href="#" title="beraten"><span>Beraten</span></a></li>
<li id="planen"><a href="#" title="planen">position<span>planen</span></a></li>
</ul>
</div>
</div>



body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #000;
}
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#contentInner {
margin: 0px auto;
width: 1008px;
height: 672px;
background-image: url(img/bkg.jpg);
position: relative;
}
#contentInner #navileft {
height: 400px;
width: 126px;
position: absolute;
left: -40px;
top: 210px;
}

/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/

ul#navigation {
width:90px;
list-style:none;
height:122px;
}

ul#navigation li {
display:inline;

}

ul#navigation li a {
height:122px;
float:left;
text-indent:-9999px;
text-decoration:none;
}

ul#navigation li a span {
float:left;
display:block;

}

/*////////////*/
ul#navigation li#beraten a {
width:97px;
height:112px;
background:url(img/beraten_btn.png) no-repeat 0px 0;
}
ul#navigation li#beraten a:active,
ul#navigation li#beraten a:hover {
background-position:0px -112px;
}
ul#navigation li#beraten a.current {
background-position:0px 0px -112px;

}
ul#navigation li#beraten a:hover {z-index: 500;}


/*////////////*/
ul#navigation li#planen a {
width:90px;
height:112px;
background:url(img/planen_btn.png) no-repeat 0px 0;
margin-top: -40px;
}
ul#navigation li#planen a:active,
ul#navigation li#planen a:hover {
background-position:0px -122px;
}
ul#navigation li#planen a.current {
background-position:0px 0px -122px;
}
ul#navigation li#planen {z-index: 400;}