✔ Listenmenü erst vertikal dann horizontal

[ronaldo84]

Hallo,

ich habe ein Listenmnü das beim MouseOver ausklappen soll. Das kriege ich mittels hover auch alles hin. Allerdings wenn ich die dritte Ebene einbelde, verschiebt diese die unteren Menüpunkte nach unten. Dies soll aber nicht geschehen. Wie kann ich das verhindern. Zu verdeutlichung die Bilder im Anhang. Das Erste wie es ist. Das Zweite wie es sein sollte. Das zweite Menü ist aber mit JavaScript erstellt, was ich gerne ändern würde.

Hier mal der Code:

DIV#menu_1 ul {
    list-style-type: none;
    margin:0;
    padding:0;  
}
 
/*Alle ul Elemente Ausblenden*/
ul.menu ul  {
    display:none;
}
 
ul.menu ul li {
    margin-left: -1px;
    float:none;
    width: 250px;
}
ul.menu ul li ul li {
    margin: 0 0 0 225px;
    float:none;
    width: 300px;
    z-index:1;
    display:none;
}
 
/*Alle <li> Elemente*/
ul.menu li{
 padding:0;
 margin:0;
 background-color: #fff;
 float:left;
 width:16.45%;
  border:1px solid #01608C;
}
 
/*OnMouseOver bei jedem <li>*/
ul.menu li a:hover{
  background:#01608C;
  color: #fff;
}
 
ul.menu a {
    display: block;
    height: 17px;
    padding: 3px 0 3px 5px;
    text-decoration:none;
    color:#01608C;
    font-weight: bold;
    background-color:#fff;
}
 
ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul, ul.menu li ul li:hover ul li   {
    display:block;
    background-color: transparent;
}

Hier der HTML-Code

        <div id="menu_1">
          <ul class="menu">
        <li><a href="#">Ebene1 Punkt1</a></li>
        <li onmouseover="show(this)" onmouseout="hide(this)" ><a href="#">Ebene1 Punkt2</a>
          <ul>
            <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene2 Punkt1</a>
            <ul>
              <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene3 Punkt1</a></li>
              <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene3 Punkt2</a></li>
            </ul>
            </li>
            <li><a href="#">Ebene2 Punkt2</a></li>
            <li><a href="#">Ebene2 Punkt3</a></li>
          </ul>
        </li>
        <li><a href="#">Ebene1 Punkt3</a></li>
        <li><a href="#">Ebene1 Punkt4</a></li>
      </ul>
        </div>

Hoffe ihr könnt mir helfen.
Vielen Dank

 

[Maik]

Hi,

da du das Menü ohne JS realisieren möchtest, empfehle ich dir als Arbeitsvorlage http://www.cssplay.co.uk/menus/final_drop5.html oder http://www.cssplay.co.uk/menus/padding.html.