CSS gesteuertes DropDown Menü

[Simon]

Hallo zusammen,

ich habe ein Mainmenü und ein Submenu. Das Problem ist jetzt, dass der IE das Submenu verschoben (in der mitte des Mainmenu) zum Mainmenu anzeigt. Es ist horizontal und das Submenü ist vertikal. Habe vorgängig ein Script eingefügt für den IE.

CSS:

#mainlevel, #mainlevel ul,
#mainlevel li, sublevel li {
 padding: 0;
 margin: 0;
 list-style: none;
 text-align: center;
}

#mainlevel a {
  display: block;
  width: 100px;
  background-color: #B6B6A5;
}

#mainlevel li, sublevel li {
 float: left;
 width: 100px;
 line-height: 32px;
 border-right: 1px solid #FFFFFF;
}
#mainlevel li a {
 text-align: center;
}
#mainlevel a:hover, sublevel a:hover {
  background-color: #A2A28C;
}
#mainlevel li li a {
 text-align: center;
 left: -45px;
}
#mainlevel li:hover ul, #mainlevel li.sfhover ul {
  left: auto;
}
#mainlevel li:hover ul {
  left: auto;
}
#mainlevel li ul {
  position: absolute;
  width: 100px;
  left: -1000px;
}
a.sublevel:link, a.sublevel:visited {
  padding-left: 1px;
  vertical-align: middle;
  font-size: 11px;
  font-weight: bold;
  color: #c64934;
  text-align: center;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
a.sublevel:hover {
 color: #900;
 text-decoration: none;
}

a.sublevel#active_menu {
 color: #333;
}

HTML:

<script type="text/javascript">

sfHover = function() {
        var sfEls = document.getElementById("mainlevel").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
          sfEls[i].onmouseover = function() {
            this.className += " sfhover";
          }
          sfEls[i].onmouseout = function() {
            this.className=this.className.replace(new RegExp(" sfhover\b"), "");
          }
        }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);
    //-->
  </script>

<ul  id="mainlevel"><li><a href="ueberuns.html" class="mainlevel" title="Über Uns">Über Uns</a></li>
<li><a href="Angebot" class="mainlevel" title="Angebot">Angebot</a>
<ul ><li><a href="Projektablauf.html" class="sublevel" title="Kuchen">Kuchen</a></li>
<li><a href="Weine.html" class="sublevel" title="Weine">Weine</a></li>
<li><a href="Bier.html" class="sublevel" title="Bier">Biersorten</a></li></ul>
</li>
<li><a href="Referenzen.html" class="mainlevel" title="Referenzen">Referenzen</a></li>
<li><a href="Kontakt.html" class="mainlevel" title="Kontakt">Kontakt</a></li>
<li><a href="Links.html" class="mainlevel" title="Links">Links</a></li></ul>

Die Seite nicht online, und daher muss ich alles Posten!

Hat jemand eine Idee, warum der IE die verschibung macht?

Gruss Simon