Menustruktur vertikal, horizontal, vertikal

[anneon]

Hi zusammen,

ich habe ein Problem mit der 3 Ebene in meiner Menustruktur.

Die ersten zwei Ebenen funktionieren ganz wunderbar, die
horizontale linie wird immer direkt an den aktiven Punkt ran gesetzt.
Die 3 Ebene müsste jetzt aber direkt unter dem aktiven Punkt auf der 2
Ebene angezeigt werden. Aber der verschiebt sich immer um genau einen
Punkt nach rechts.

Hat jemand von euch einen Rat warum das so ist und wie
ich das Problem lösen kann?

Ein grosses Danke schonmal im voraus.

anneon

HTML CODE

Code: Alles auswählen

<div id="menu">
    <ul>
        <li>
                <ul>
                    <li><a href="#">Ebene 1a</a></li>
                    <li><a href="#">Ebene 1b</a>
                        <ul class="sub1">
                            <li><a href="#">Ebene 2a</a></li>
                            <li><a href="#">Ebene 2b</a></li>
                            <li><a href="#">Ebene 2c</a>
                                <ul class="sub2">
                                <li><a href="#">Ebene 3a</a></li>
                                <li><a href="#">Ebene 3b</a></li>
                                <li><a href="#">Ebene 3c</a></li>
                                <li><a href="#">Ebene 3d</a></li>
                                <li><a href="#">Ebene 3e</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Ebene 2</a></li>
                            <li><a href="#">Ebene 2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Ebene 1c</a></li>
                    <li><a href="#">Ebene 1d</a></li>
                </ul>
         </li>
     </ul>
</div>


CSS

Code: Alles auswählen

#menu {
width: 100px;
}

#menu ul {
list-style: none;
padding: 0;
text-align:right;
}

#menu a {
text-decoration: none;
margin: 0;
padding: 2px 0 0 0px;
font-size: 10pt;
}

#menu a:hover {
color: #3e3d40;
}

#menu li {
position: relative;
}

#menu ul ul  {
list-style: none;
padding: 0;
text-align:right;
}

#menu ul ul ul  {
position: absolute;
top: 0;
left: 100%;
width: 100%;
display:inline;
text-align:left;
padding: 0 0 0 0px;
margin: 0;
white-space:nowrap;
}

#menu ul ul ul li {
display: inline;
list-style-type: none;
padding-right: 0px;
height: 25px;
visibility:hidden;
}

#menu ul ul ul ul li {
display: block;
height: 25px;
position:relative;
top: 25px;
left:0px;
margin: 0 0 0 0px;
visibility:hidden;
}

#menu ul ul li:hover ul li,
#menu ul ul a:hover ul li{
visibility: visible;
}

#menu ul ul ul li:hover ul li,
#menu ul ul ul a:hover ul li{
   visibility: visible;
}

#menu ul ul:hover ul ul li{
   visibility: hidden;
}