CSS Klappmenu - Untermenüs klappen wieder ein

[smash]

Holla,

ich erstelle derzeit ein Web-Layout mit CSS. Ich habe dazu ein "ausklappbares" Menü erstellt. Leider klappen die Untermenüs sofort wieder ein, wenn ich den übergeordneten Menüpunkt mit der Maus verlasse und über das Untermenü fahre. Das passiert auch im Firefox. Ich kann den Fehler leider nicht finden. Ich hoffe ihr könnt mir helfen.

Vielen Dank im Voraus

Hier der CSS Code:

.menuebene1 {

}


.menuebene2, .menuebene3 {

display:none;

}


.menuebene1 div {

float:left;

padding: 8px 6px;

position:relative;

}


.menuebene1 div a {

color:#ffffff;

font-weight:bold;

text-decoration:none;

}


.menuebene1 div:hover .menuebene2, .menuebene2:hover {

display:block;

position:absolute;

margin:0;

padding:0;

top:20px;

left:0;

background-color:#0000ff;

border-top-color:#dFdFdF;

border-left-color:#dFdFdF;

border-right-color:#000000;

border-bottom-color:#000000;

border-width:1px;

border-style:solid;

}


.menuebene2 div:hover .menuebene3, .menuebene3:hover {

display:block;

position:absolute;

margin:0;

padding:0;

top:0;

left:114px;

background-color:#0000ff;

border-top-color:#dFdFdF;

border-left-color:#dFdFdF;

border-right-color:#000000;

border-bottom-color:#000000;

border-width:1px;

border-style:solid;

}

Hier der HTML-Code des Menüs:

<div id="headermenu">

  <div class="menuebene1">

    <div onmouseover="show(this)" onmouseout="hide(this)">

      <a href="hauptmenue/willkommen.html" onfocus="blurLink(this);"  >Willkommen</a>

    </div>

    <div onmouseover="show(this)" onmouseout="hide(this)">

      <a href="hauptmenue/unternehmen.html" onfocus="blurLink(this);"  >Unternehmen</a>

    </div>

    <div onmouseover="show(this)" onmouseout="hide(this)">

      <a href="hauptmenue/service/brunnenservice/regenerierung.html" onfocus="blurLink(this);"  >Service</a>

      <div class="menuebene2">

        <div onmouseover="show(this)" onmouseout="hide(this)">

          <a href="hauptmenue/service/brunnenservice/regenerierung.html" onfocus="blurLink(this);"  >Brunnenservice</a>

          <div class="menuebene3">

            <div onmouseover="show(this)" onmouseout="hide(this)">

              <a href="hauptmenue/service/brunnenservice/regenerierung.html" onfocus="blurLink(this);"  >Regenerierung</a>

            </div>

            <div onmouseover="show(this)" onmouseout="hide(this)">

              <a href="hauptmenue/service/brunnenservice/sanierung.html" onfocus="blurLink(this);"  >Sanierung</a>

            </div>

            <div onmouseover="show(this)" onmouseout="hide(this)">

              <a href="hauptmenue/service/brunnenservice/brunnen-tv.html" onfocus="blurLink(this);"  >Brunnen-TV</a>

            </div>

          </div>

        </div>

        <div onmouseover="show(this)" onmouseout="hide(this)">

          <a href="hauptmenue/service/pumpenservice/pumpenreparatur.html" onfocus="blurLink(this);"  >Pumpenservice</a>

          <div class="menuebene3">

            <div onmouseover="show(this)" onmouseout="hide(this)">

              <a href="hauptmenue/service/pumpenservice/pumpenreparatur.html" onfocus="blurLink(this);"  >Pumpenreparatur</a>

            </div>

            <div onmouseover="show(this)" onmouseout="hide(this)">

              <a href="hauptmenue/service/pumpenservice/lieferung.html" onfocus="blurLink(this);"  >Lieferung</a>

            </div>

          </div>

        </div>

      </div>

    </div>

    <div onmouseover="show(this)" onmouseout="hide(this)">

      <a href="hauptmenue/anlagenbau.html" onfocus="blurLink(this);"  >Anlagenbau</a>

    </div>

    <div onmouseover="show(this)" onmouseout="hide(this)">

      <a href="hauptmenue/edelstahl.html" onfocus="blurLink(this);"  >Edelstahl</a>

    </div>

    <div onmouseover="show(this)" onmouseout="hide(this)">

      <a href="hauptmenue/wissenswertes/glossar.html" onfocus="blurLink(this);"  >Wissenswertes</a>

      <div class="menuebene2">

        <div onmouseover="show(this)" onmouseout="hide(this)">

          <a href="hauptmenue/wissenswertes/glossar.html" onfocus="blurLink(this);"  >Glossar</a>

        </div>

        <div onmouseover="show(this)" onmouseout="hide(this)">

          <a href="hauptmenue/wissenswertes/berechnungen.html" onfocus="blurLink(this);"  >Berechnungen</a>

        </div>

      </div>

    </div>

  </div>

</div>

[trebstyle]

kann ich leider nicht nachvollziehen. im firefox klappts wunderbar (naja, die menüleiste wird nicht richtig angezeigt), im IE geht garnichts. warum auch immer. ich schaus mir aber nochmals an.

[smash]

Danke für deine Antowort, aber ich habs jetzt.

Habe festgestellt das dieser Fehler nur auf Unterseiten auftritt, die schon Inhalte im darunterliegenden Div enthalten.

Ich habe das Problem gelöst, indem ich bei den Untermenüs z-index:2; angegeben habe.

[geloescht_JesterDay]

<div onmouseover="show(this)" onmouseout="hide(this)">

Wo ist das ein CSS-Menü? :confused:

Stu Nicholls | CSSplay | A CSS flyout menu that works in IE

Da findest du ein CSS Menü, ganz ohne Javascript.