✔ Drop-down-Menu schließt unerwartet über anderem div-Bereich

[cdl]

Hallo,
ich habe ein Drop-down-Menu in einem div-Bereich, das über die css-Eigenschaft visibility angezeigt werden soll, solange der Cursor sich darüber befindet, und versteckt werden soll, wenn der Cursor den Bereich verlässt. Das Ganze wir über Javascript gesteuert und funktioniert im Prinzip auch.
Je nach Seiteninhalt kommt es aber vor, dass das Drop-down-Menu einen anderen div-Bereich ("Inhalt") überdeckt, dem ich eigentlich eine feste Höhe und mit "overflow:auto" ggf. Scrollbalken zuweisen möchte. Wenn ich aber im Drop-down-Menu etwas anklicken will, dass über dem Inhaltsbereich "schwebt", wird das Drop-down-Menu geschlossen, egal welchen z-index ich den beiden Bereichen zuweise. Ich habe auch schon erfolglos versucht, einen weiteren div-Bereich dazwischenzulegen. Wenn ich allerdings für den Inhaltsbereich auf "overflow:auto" verzichte, klappt alles so, wie es sollte.
Ich hoffe, das ist verständlich so, leider habe ich im Moment kein Demo, auf das ich verweisen könnte.

Vielen Dank
Carsten

 

[d2wap]

Es wäre hilfreich, wenn du trotz fehlender Demo im Internet den Quelltext der HTML-Datei und des CSS hier postest - dann kann man den Fehler schneller finden bzw. dir schneller helfen.

Ich sag mal spontan:
Der Div-Container reagiert auf das visibly:hidden - aber der Container, der dann eingeblendet wird besietzt dieses Attribut nicht. Gib dem Container oder der Auswahl die dann kommt die Attribute onouseover:visible onmouseout:hidden

 

[Maik]

Hi,

wie schon mein Vorredner sagte, wäre hier der vollständige Quellcode (HTML, CSS, JS) ganz hilfreich, um da mal einen Blick drauf werfen zu können. Ansonsten müsste man spekulieren, warum sich das Dropdown-Menü unerwünscht schliesst.

 

[cdl]

Ok, sehe ich ein, wird aber wahrscheinlich nicht vor morgen passieren können.
Danke erstmal
Carsten

 

[Maik]

Kein Problem, wir haben es nicht eilig.

 

[cdl]

So, ich habe mal ein paar Sachen zusammengesucht ...
Zum Ansehen eine Demo auf
http://www.clever-links-ol.de/demo/testseite.html.
Dazu zwei Anmerkungen:
1. Ich habe inzwischen festgestellt, dass es vom Browser abhängt, was passiert. Firefox 2 und Opera 9 zeigen es genau so an, wie ich es haben wollte. Firefox 1 zeigt den in der Eingangsfrage beschriebenen Effekt. Und IE bis einschließlich Version 6 zeigt nur Murks an.
2. Dass die Optik bescheiden ist, weiß ich. Wird auch nicht so bleiben. Momentan bin ich gerade dabei, die Navigation von 2 Ebenen auf 3 umzustellen, da hat die Funktionalität Vorrang.

Hier folgen noch die entscheidenden Passagen des Codes:

CSS:

#navispalte
{
position:absolute;
top:40px;
left:155px;
width:565px;
height:30px;
}

.ebene3
{
position:absolute;
top:29px;
padding:5px;
border:1px solid silver;
visibility:hidden;
background-color:#dddddd;
z-index:3;
float:left;
font-size:13px;
font-weight:bold;
line-height:150%;
}

#tabelleninhalt
{
position:absolute;
top:75px;
width:105%;
height:500px;
overflow:auto;
font-size:13px;
}

JavaScript:

function zeigen(menu3)
{
document.getElementById(menu3).style.visibility = "visible";
}//--------------------------------------------------------------zeigen---

function verstecken(menu3)
{
document.getElementById(menu3).style.visibility = "hidden";
}//----------------------------------------------------------verstecken---

HTML:

<div id="navispalte">
<div id="h_neben" onmouseover="javascript:zeigen('11');" onmouseout="javascript:verstecken('11');">
Katalog
</div><!-- h_neben-->

<div class="ebene3" id="11" style="left:0px" onmouseover="javascript:zeigen('11');" onmouseout="javascript:verstecken('11');">
<a class="e3" href="rahmen.php?&hid=1&nid=11&id3=11">&Uuml;bersicht</a>
<a class="e3" href="rahmen.php?&hid=1&nid=11&id3=112">Suche</a>
<a class="e3" href="rahmen.php?&hid=1&nid=11&id3=113">Neuer&nbsp;Artikel</a>
<a class="e3" href="rahmen.php?&hid=1&nid=11&id3=114">Bearbeiten</a>
<a class="e3" href="rahmen.php?&hid=1&nid=11&id3=115">L&ouml;schen</a>
<a class="e3" href="rahmen.php?&hid=1&nid=11&id3=116">Sichern</a>
</div>

<div id="h_neben" onmouseover="javascript:zeigen('12');" onmouseout="javascript:verstecken('12');">
Lager</div>
<!-- h_neben -->

<div class="ebene3" id="12" style="left:80px" onmouseover="javascript:zeigen('12');" onmouseout="javascript:verstecken('12');">
<a class="e3" href="rahmen.php?&hid=1&nid=12&id3=12">&Uuml;bersicht</a>
<a class="e3" href="rahmen.php?&hid=1&nid=12&id3=122">Suche</a>
<a class="e3" href="rahmen.php?&hid=1&nid=12&id3=123">Neuer&nbsp;Artikel</a>
<a class="e3" href="rahmen.php?&hid=1&nid=12&id3=124">Bearbeiten</a>
<a class="e3" href="rahmen.php?&hid=1&nid=12&id3=125">L&ouml;schen</a>
<a class="e3" href="rahmen.php?&hid=1&nid=12&id3=126">Sichern</a>
</div>

</div><!-- navispalte -->

 

[Maik]

Hi,

setz mal für das DIV #navispalte einen z-index-Wert, wie für .ebene3 mit z-index:3, dann schliesst sich das Menü auch nicht unerwartet im FF 1.x und IE.

Zudem müssen IDs in einem Dokument eindeutig sein, d.h. sie dürfen nicht mehrmals vergeben werden, wie die IDs #h_haupt und #h_neben. Ebenso dürfen ID-Namen nicht mit einer Ziffer beginnen.

 

[cdl]

Hi,

setz mal für das DIV #navispalte einen z-index-Wert, wie für .ebene3 mit z-index:3, dann schliesst sich das Menü auch nicht unerwartet im FF 1.x und IE.

Habe ich gemacht, ändert leider nichts!

Zudem müssen IDs in einem Dokument eindeutig sein, d.h. sie dürfen nicht mehrmals vergeben werden, wie die IDs #h_haupt und #h_neben. Ebenso dürfen ID-Namen nicht mit einer Ziffer beginnen.

Ich habe die IDs #h_haupt und #h_neben jeweils in class= geändert, und vor die mit Ziffern beginnenden ID-Namen jeweils ein "e" gestellt. Ändert leider auch nichts!

 

[Maik]

Also bei mir verschwindet das Menü nicht mehr, nachdem ich für das DIV #navispalte den empfohlenen z-index-Wert gesetzt habe - siehe hierzu die Screenshots aus FF 1.5.0.7 und IE6 (OS: Win2000).

Der Hinweis mit den mehrfach vergebenen IDs und den ID-Namen, die mit einer Ziffer beginnen, war grundsätzlich gemeint und hat mit dem Problem an für sich nichts zu tun.

 

[cdl]

Der Hinweis mit den mehrfach vergebenen IDs und den ID-Namen, die mit einer Ziffer beginnen, war grundsätzlich gemeint und hat mit dem Problem an für sich nichts zu tun.

Das war mir schon klar, trotzdem hast Du natürlich Recht damit. Und was das Problem angeht: Im Firefox 1.0.8 unter Linux tritt das Problem zwar noch immer auf, unter FF 2 aber nicht, und unter Windows in keinem genannten Browser mehr. Vielen Dank für die Hilfe.
Carsten