✔ Menüleiste mit ausklappbaren Untermenüs

[Parantatatam]

Hallo,

ich bastle gerade an einer Menüleiste, welche sich beim Überfahren mit der Maus ausklappen soll. Soweit geht es auch schon. Ich will jetzt aber noch, dass es in diesen Untermenüs ebenfalls die Möglichkeit Verweise so zu markieren, dass man dort wieder ein Untermenü ausklappen kann. Dazu habe ich mich dem Beispiel von SelfHTML.org bedient.

Hier sind meine Ergebnisse, die ich bisher habe:

div#menu {
    width: 975px; /* 47.1em */
    margin: 5px;
    border: 2px solid #DBD400;
    background-color: #EBEE98;
}

* html div#menu {  /* Korrektur fuer IE 5.x */
    width: 48.7em; /* 48.7em : Wie muss der Wert hier aussehen? */
    w\idth: 975px; /* 47.1em */
}

div#menu div {
    clear: left;
}

ul#menubar {
    margin: 0;
    padding: 0;
    text-align: center;
}

ul#menubar li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0;
    padding: 0;
}

* html ul#menubar li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
}

*:first-child+html ul#menubar li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
}

ul#menubar li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 1.6em;
    left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
    text-align: center;
}

* html ul#menubar li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
}

*:first-child+html ul#menubar ul {  /* Workaround fuer den IE 7 */
    padding-bottom:0.4em;

}

ul#menubar li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */

}

ul#menubar li ul li {
    float: none;
    display: block;
    margin-bottom: 0;
    margin-left: 5px

}

ul#menubar a {
    display: block;
    width: 195px;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 0;
    text-decoration: none;
    color: #C20A12;
}

* html ul#menubar a {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 195px;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
}

ul#menubar a:hover {
    border-color: white;
    background-color: #D3D000;
}

a.submenu {
    background: url("http://images.dntm.de/arrow.gif") no-repeat right;
}

a.submenu:hover ul {
    display: block;
    margin-top: -5px;
}

ul.submenu li a {
    margin-left: 195px;
    margin-top: 0px;
    display: none;
}

<!-- Start: Menu -->
      <div id="menu" class="clearfix">
        <ul id="menubar">
          <li><a href="/Main">Start</a>
            <ul>
              <li><a href="/Main">Startseite</a></li>
              <li><a href="/About:DnTm" class="submenu">DnTm.DE</a>
                <ul class="submenu">
                  <li><a href="/About:DnTm">Was ist DnTm.DE?</a></li>
                  <li><a href="/About:Stats">Statistik</a></li>
                  <li><a href="/About:Ads">Bei uns werben</a></li>
                </ul>
              </li>
              <li><a href="/About:Dampfer" class="submenu">Dampfer.NET</a>
                <ul class="submenu">
                  <li><a href="/About:Dampfer">Was ist Dampfer.NET?</a></li>
                  <li><a href="/Campaign:Partner">Partnercrews</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="/Apply">Bewerben</a>
            <ul>
              <li><a href="/Apply">Bewerben</a></li>
              <li><a href="/Apply:Chance">Gewinnchance</a></li>
              <li><a href="/Apply:Jury" class="submenu">Jury</a>
                <ul class="submenu">
                  <li><a href="/Apply:Jury">Mitglieder</a></li>
                  <li><a href="/Apply:Criteria">Kriterien</a></li>
                  <li><a href="/Apply:Points">Punktesystem</a></li>
                </ul>
              </li>
              <li><a href="/Apply:Category">Kategorien</a></li>
            </ul>
          </li>
          <li><a href="/Campaign">Monatsaktionen</a>
            <ul>
              <li><a href="/Campaign:Participate">Teilnehmen</a></li>
              <li><a href="/Campaign:Winner">Gewinner</a></li>
              <li><a href="/Campaign">Aktionen</a></li>
              <li><a href="/Campaign:Partner">Partnercrews</a></li>
            </ul>
          </li>
          <li><a href="/Model">Topmodels</a>
            <ul>
              <li><a href="/Model:Top3">Besten drei</a></li>
              <li><a href="/Model:Top10Female">Top 10 M&auml;dels</a></li>
              <li><a href="/Model:Top10Male">Top 10 Jungs</a></li>
              <li><a href="/Model:History">"History"</a></li>
            </ul>
          </li>
          <li><a href="/DnTm">DnTm</a>
            <ul>
              <li><a href="/DnTm:VisitorBook">G&auml;stebuch</a></li>
              <li><a href="/DnTm:Forum">Forum</a></li>
              <li><a href="/DnTm:Help">Hilfe</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- End: Menu -->

Im Anhang sind zwei Bilder: ist.jpg zeigt die Situation, wie es jetzt aussieht (Ausschnitt) und soll.jpg zeigt, wie es sein sollte (da gibt es aber immer noch ein Problem, da das Untermenü auf der gleichen Höhe beginnen sollte wie der Menüpunkt, der links gelb unterlegt ist): wenn man über einen Menüpunkt, dann soll das Untermenü angezeigt werden.

 

[Maik]

Die Ursache für die vertikale Verschiebung findet sich in der top:1.6em-Deklaration für die Submenüs, die in diesem Fall für die Subsubmenüs auf "0" gesetzt gehört.

mfg Maik

 

[Parantatatam]

Danke Maik. Deine Idee hatte aber als Ergebnis nicht nur, dass die Untermenüs auf einer Höhe mit ihrem auslösenden Menüpunkt waren sondern auch, dass das erste Untermenü das Hauptmenü überlagert hat - also die erste Zeile. Das Problem konnte ich jetzt damit lösen, das ich alles beim Alten belassen habe und nur folgendes angefügt habe:

ul.submenu {
    top: 0 !important;
}

Damit wäre mein erstes Problem gelöst. Hat noch jemand eine Lösung für das Problem mit dem Ausklappen beim Überfahren mit der Maus?

 

[Maik]

Warum nicht einfach so?

ul#menubar li ul li ul {
    top:0;
}

Die Subsubmenüs mußt du ebenfalls erstmal ausblenden, und mit dem entsprechenden Selektor wieder einblenden lassen.

"Dein" Stylesheet berücksichtigt diese Menüebene nämlich überhaupt nicht, weshalb sie beim Einblenden der ersten Untermenüebene sichtbar sind.

mfg Maik

 

[Parantatatam]

Mh, Danke. Ich habe jetzt auch eine Lösungsmöglichkeit gefunden (die deiner ähnlich ist) bei der ich den > Operator nutze. Problem gelöst. Danke dir Maik.