bin mittlerweile weiter gekommen, allerdings bekomme ich jetzt dem IE 6 nicht beigebracht, dass das position:absolute wieder aufgehoben wurde mit position: static;
Dieser Teil stellt das wichtigste im Moment dar:
#navigation ul .li_a_0,
#navigation ul .li_a_1 {
height: 30px;
}
#navigation ul .li_a_0 a,
#navigation ul .li_a_1 a {
height: 23px;
margin-top: 1px;
padding-top: 6px;
display: block;
position: absolute;
}
*:first-child+html #navigation ul .li_a_0 a,
*:first-child+html #navigation ul .li_a_1 a,
* html #navigation ul .li_a_0 a,
* html #navigation ul .li_a_1 a {
position: static;
}
Listenaufbau
<div id="navigation">
<ul class="navigation_0">
<li class="li_a_0"><a href="#">Test 1</a></li>
<li class="li_a_0"><a href="#">Test 2</a></li>
<li>
<ul class="navigation_1">
<li class="li_a_1"><a href="">Test 3</a></li>
<li class="li_a_1"><a href="">Test 4</a></li>
<li class="li_a_1"><a href="">Test 5</a></li>
<li class="li_a_1"><a href="">Test 6</a></li>
</ul>
</li>
<li class="li_a_0"><a href="#">Test 7</a></li>
<li class="li_a_0"><a href="#">Test 8</a></li>
<li class="li_a_0"><a href="#">Test 9</a></li>
<li class="li_a_0"><a href="#">Test 10</a></li>
<li class="li_a_0"><a href="#">Test 11</a></li>
<li>
</div>
Der gesamte Style wäre:
#navigation ul {
text-align: left;
list-style: none;
margin: 0px auto;
padding: 0px;
width: 215px;
}
.navigation_0 {
background-image: url(./images/navigation_bg.png);
}
* html #navigation ul {
margin: 0px;
}
#navigation ul .li_a_0,
#navigation ul .li_a_1 {
height: 30px;
}
#navigation ul .li_a_0 a,
#navigation ul .li_a_1 a {
height: 23px;
margin-top: 1px;
padding-top: 6px;
display: block;
position: absolute;
}
*:first-child+html #navigation ul .li_a_0 a,
*:first-child+html #navigation ul .li_a_1 a,
* html #navigation ul .li_a_0 a,
* html #navigation ul .li_a_1 a {
position: static;
}
* html .navigation_0 a {
width: 215px;
}
#navigation ul li a { padding-left: 5px; width: 210px; }
#navigation ul ul li a { padding-left: 10px; width: 205px; }
#navigation ul ul ul li a { padding-left: 20px; }
#navigation ul li a {
font-weight: bold;
text-decoration: none;
font-size: 0.8em;
color: #444444;
}
#navigation ul a:hover {
background-color: #444444;
color: #ffffff;
}