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 ;-)