Menü mit CSS in Opera und Firefox

sarfuan

Hi,

ich hab mir folgendes Menü geschrieben:

<html><head>
<style type="text/css">
#menu { background-color: black; }
#menu #nav{
    display: table;
    line-height: 5em;
}
#nav li { display: table-cell; }
#nav li ul.submenu { display: none; }
#nav li:hover ul.submenu {
    display: block;
    position: absolute;
    margin-left: -1px;
    margin-top: -3px;
    border: 1px solid red;
}
</style></head><body>
<div id="menu">
<ul id="nav">
    <li><a href="">Menü</a>
        <ul class="submenu">
        <li><a href="">Eintrag</a></li>
        </ul>
    </li>
</ul>
</div>
</body></html>

der Code ist hier natürlich nur auf das absolute Minimum reduziert. Das Problem ist jetzt, dass das Submenü in Opera und Firefox jeweils in unterschiedlicher Höhe dargestellt wird.
Mit margin.top in #nav li:hover ul.submenu kann ich diese Höhe bequem ändern - aber das Ergebnis ist in beiden Browsern immer unterschiedlich hoch dargestellt.
Was ich will, ist eigentlich, dass das Submenü exakt auf der Linie zwischen dem schwarzen und dem weißen Bereich aufklappt. Aber das kann ich immer nur in einem der beiden Browser erreichen - im anderen sieht's dann bescheiden aus. Momentan hab ich eine "Notlösung" gewählt, womit es bei beiden Browsern gleich bescheiden aussieht.
Aber das kann's doch nicht sein ...

Jemand ne Idee, wie ich erreichen kann, dass das Submenü in Opera UND Firefox vernünftig aussieht? Natürlich ohne Javascript. Vielen Dank

sarfuan

Hm, ich sehe, euch fällt genau so viel dazu ein, wie mir