Alexander Müller: Klappmenüs

Hallo Gruppe,

Ich habe mit CSS ein Klappmenü programmiert, welches sich öffnet wenn ich über ein Listenelement fährt.

Hier der HTML-Code:

<div class="menu">
<h1>Auswahl</h1>
 <ul>
  <li><a href="index.php?load=2">Beispiel 1 (Klappmen&uuml;)</a>
   <ul>
 <li><a href="index.php?load=2&amp;id=1">Eintrag 1</a></li>
 <li><a href="index.php?load=2&amp;id=1">Eintrag 2</a></li>
 <li><a href="index.php?load=2&amp;id=1">Eintrag 3</a></li>
 <li><a href="index.php?load=2&amp;id=1">Eintrag 4</a></li>
 <li><a href="index.php?load=2&amp;id=1">Eintrag 5</a></li>
   </ul>
  </li>
</ul>
</div>

Im CSS wird der zweite <ul> versteckt und wenn :hover ausgelöst wird wird des <ul> wieder angezeigt (display: block).

.menu li ul
{
 position: absolute;
 left: 190px;
 top: 19px;
 display: none;
}

.menu li:hover ul
{
 width: 120px;
 display: block;
}

Zur besseren Übersicht findet ihr die Seite auf http://www.dnadmin.com/files/base_layout/.

Das Problem ist, dass das Klappmenü verschwindet wenn man über #content fährt. Wie kann ich des beheben?

Gruß
 -- Alexander Müller

  1. Hi,

    .menu li:hover ul

    Daß das im IE nicht funktioniert, ist Dir bewußt?

    Das Problem ist, dass das Klappmenü verschwindet wenn man über #content fährt. Wie kann ich des beheben?

    Was ist #content? Ist das etwas, was sich außerhalb des betreffenden li befindet? Dann ist es doch logisch, denn :hover gilt ja nur, solange der Mauszeiger über dem entsprechenden Element ist.

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  2. Hallo Alexander.

    Ich habe mit CSS ein Klappmenü programmiert, welches sich öffnet wenn ich über ein Listenelement fährt.

    Sorry, aber im IE6 unter Win98SE klappt auf der verlinkten Seite weder etwas auf noch zu. Vermutlich liegt es an der mangelhaften Umsetzung von :hover im IE.

    Das Problem ist, dass das Klappmenü verschwindet wenn man über #content fährt. Wie kann ich des beheben?

    Du weißt doch sicher, dass "hover" das Aussehen eines Elementes beeinflusst, wenn man mit der Maus darüberfährt. Das heißt aber auch, dass es seine ursprüngliche Gestalt wieder annimmt, wenn die Maus den zu hovernden Bereich wieder verlässt, in deinem Fall verschwindet also das Aufklappmenü wieder.

    Freundschaft!
    Siechfred

    --
    Wissen bedeutet zu wissen, wo es steht.
    1. Du weißt doch sicher, dass "hover" das Aussehen eines Elementes beeinflusst, wenn man mit der Maus darüberfährt. Das heißt aber auch, dass es seine ursprüngliche Gestalt wieder annimmt, wenn die Maus den zu hovernden Bereich wieder verlässt, in deinem Fall verschwindet also das Aufklappmenü wieder.

      Kann ich des nicht irgendwie so anpassen, dass das :hover sich erst schließt wenn man nicht mehr im Klappmenü selbst ist?

      1. Hi,

        Du weißt doch sicher, dass "hover" das Aussehen eines Elementes beeinflusst, wenn man mit der Maus darüberfährt. Das heißt aber auch, dass es seine ursprüngliche Gestalt wieder annimmt, wenn die Maus den zu hovernden Bereich wieder verlässt, in deinem Fall verschwindet also das Aufklappmenü wieder.
        Kann ich des nicht irgendwie so anpassen, dass das :hover sich erst schließt wenn man nicht mehr im Klappmenü selbst ist?

        :hover trifft auf ein Element genau so lange zu, wie sich der Mauszeiger über dem Element befindet.
        Daran kannst Du nichts ändern. Das ist so. Punkt.

        cu,
        Andreas

        --
        MudGuard? Siehe http://www.Mud-Guard.de/
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Daran kannst Du nichts ändern. Das ist so. Punkt.

          Also kann man mit css keine Klappmenüs programmieren?
          Gibts keine Möglichkeit einen :hover für das Menü selbst einzusetzen sodass genau das Menü angezeigt bleibt?

          Gruß
           -- Alexander Müller

          1. Hallo.

            Gibts keine Möglichkeit einen :hover für das Menü selbst einzusetzen sodass genau das Menü angezeigt bleibt?

            Doch, die gibt es. Indem du das betreffende Element bei Mausberührung die gesamte Seite einnehmen lässt, wodurch aber wieder andere, wesentlich größere Nachteile entstehen.
            MfG, at

      2. Hallo Alexander.

        Kann ich des nicht irgendwie so anpassen, dass das :hover sich erst schließt wenn man nicht mehr im Klappmenü selbst ist?

        Nein, aber dieser Artikel könnte dich interessieren:
        http://aktuell.de.selfhtml.org/tippstricks/dhtml/treemenu/index.htm

        Freundschaft!
        Siechfred

        --
        Wissen bedeutet zu wissen, wo es steht.
      3. Hi Alexander,

        Du weißt doch sicher, dass "hover" das Aussehen eines Elementes beeinflusst, wenn man mit der Maus darüberfährt. Das heißt aber auch, dass es seine ursprüngliche Gestalt wieder annimmt, wenn die Maus den zu hovernden Bereich wieder verlässt, in deinem Fall verschwindet also das Aufklappmenü wieder.

        Kann ich des nicht irgendwie so anpassen, dass das :hover sich erst schließt wenn man nicht mehr im Klappmenü selbst ist?

        evt. kannst du mit der folgenden Seite etwas anfangen: http://www.meyerweb.com/eric/css/edge/menus/demo.html
        Zu beachten ist jedoch, dass dieses Menü nicht alle Browser darstellen, insbesondere der IE nicht. Daher ist ein solches Menü auch eher als experimentell einzustufen, für den kommerziellen Einsatz ist es definitiv nicht geeignet (_noch_ nicht ;-).

        Schönen Sonntag noch!
        O'Brien