CSS Menu

[Daniel]

Hallo,

folgendes Szenario: Ich habe einen Container innerhalb dessen drei weitere definiert sind. Einer ist das HAuptmenu, einer ein Untermenu und der letzte zeigt den Inhalt. Per JS wird nun das Untermenu angezeigt wenn man über den entsprechenden Link im Hauptmenu klickt oder wieder versteckt.
So weit so gut, nun hab ich innerhalb des Inhaltscontainers ein overflow:auto (jaja, das ist etwas verschrien, aber sei's drum). Dies bewirkt im IE nichts, im Firefox jedoch, das nun das Untermenu verschwindet, sobald ich im UntermMenu auf die Grundfläche des Inhalt-Container komme (das U-Menu überlappt Hauptmenu und Inhalt).
Ich hab mal versucht den relevanten Code zu posten:
#contents
{
    margin-right: 0px;
    margin-left: 0px;
    height: 600px;
    width: 850px;
    background-image: url(gelb.gif);
    position: absolute;
    top:85px;
    z-index:1;

}

#menu
{
    float: left;
    width: 110px;
    height: 340px;
    background-color: #900000;
    position: absolute;
    top:0px;
    z-index:2;
}
#menu ul, #submenu ul, #submenu2 ul
{
    list-style:none;
    margin:0;
    padding:0;
}

#menu li, #submenu li, #submenu2 li
{
    margin:0;
    padding:0;
}
#menu a:link, #menu a:visited
{
    display:block;
    margin:10px 20px 10px 10px;
    padding:10px 0px 10px 10px;
    background-color:#FCF2D6;
    height:1em;
    font-size: 100%;
    color:#900000;
    text-decoration:none;
    font-weight:bold;
}
html>body #menu a:link, #menu a:visited
{
    height:auto;
}

#submenu
{
    float: left;
    width: 100px;
    height: 60px;
    display:block;
    background-color: #900000;
    position: absolute;
    top:56px;
    left:90px;
    border:4px solid #680000;
    text-align:center;
    z-index:5;
}
#submenu a:link,#submenu a:link, #submenu a:visited
{
    display:block;
    margin:2px 0;
    padding:5px 5px 5px 5px;
    background-color:#900000;
    height:1em;
    color:#FCF2D6;
    text-decoration:none;
    border: 1px solid #FCF2D6;
}
html>body #menu a:link, #menu a:visited
{
    height:auto;
}
#inhalt
{
    position:absolute;
    margin-top:30px;
    margin-left:110px;
    width:740px;
    height:570px;
    padding:0px;
    text-align:center;
    border:0px solid black;
    overflow:auto;
    z-index:3;
}
-----------JS-FUNKTIONEN-------------------

function show(pos, element) {

pos_glob=pos;
  if(document.getElementById)
  {
    document.getElementById(element).style.visibility = "visible";
    document.getElementById("submenu").style.marginTop = pos;
  }
}

function hide() {
if(document.getElementById)
   document.getElementById("submenu").style.visibility = "hidden";
   document.getElementById("submenu2").style.visibility = "hidden";

}
-------------HTML-TEIL-----------------
<div id="contents">
<div id="menu" >
<ul>
  <li><a href="main.php?lok=0">HOME</a></li>
  <li><a href="#" onMouseOver="javascript:show('56','submenu2')"
        onMouseOut="javascript:hide();">HAPPY HOUR</a></li>
  <li><a href="#" onMouseOver="javascript:show('102','submenu')"
        onMouseOut="javascript:hide();">Link3</a></li>
</ul>
</div>
<div id="submenu" style="visibility:hidden"
         onMouseOver="javascript:show(pos_glob,'submenu')"
         onMouseOut="javascript:hide();">
         <ul id="liste">
            <li><a href="main.php?lok=1">Lokale</a></li>
            <li><a href="main.php?lok=2">Zeitwahl</a></li>
  </ul>
</div>
</div>

Bin für jeden Tipp dankbar, wie gesagt, dass passiert nut im Firefox bei overflow. Das wollte ich aber eigentlich drin haben, auch wenn manche mir das ausreden werden wollen ;-)

[Daniel]

Nachtrag:
Ich habe nun versucht, mit overflow:visible im "großen" Gesamtcontainer sowie im Inhaltscontainer es so zu umgehen, dass eben der gesamte Container nach unten ausgedehnt wird. Das Problem dabei ist aber, das nur der eigentliche Inhalt sich erweitert, der Rest bleibt stehen wie gehabt. Hab das noch nicht weiter verfolgt, aber vielleicht hat ja dafür jemande einen Tipp.

[Daniel]

Hmm, hab ich so schlecht erklärt oder weiß wirklich niemand Rat?
Ich hab seit gestern noch ein bißchen probiert, auch das Untermenu nicht mit JS sondern nur mit CSS gemacht, das hat aber nichts genützt.
Das Problem ist und bleibt, dass im Firefox (und nur da!) das Untermenu verschwindet, sobald ich einen Container der darunter liegt eine overflow-Eigenschft gebe, ganz gleich ob hidden/visible oder auto.
Wie schon gesagt, auch wenn Scrollbare DIVs nicht für jeden das gelbe vom Ei sind halte ich es auch nach langem überlegen für meine Bedürfnisse als das beste.

Ich habe auch schon gegoogelt und im Forum gesucht, um die Eigenschaften des overflo-Befehls die Funktionsweise zu verstehen, um nachvollziehen zu können, was da passiert und wieso nicht in anderen Browsern - ohne Erfolg.

Ich bitte für jeden auch noch so kleinen Tipp dankbar, gerne auch Ideen das ganze etwas anders umzusetzen, so lange der Aufwand vertretbar bleibt.

Vielen Dank, Daniel