IE macht Box größer in CSS-Menü

[Christoph]

Hallo zusammen,

ich habe ein Problem mit nem CSS-Menü.

Es geht um folgende Seite:
http://www.maigesellschaft-derichsweiler.de/files/index_neu.php?seite=index_neu

In Firefox funktioniert das Menü wunderbar. Ich benutze JavaScript zu Aufklappen, weil IE6 li:hover nicht versteht. Sobald das innere Menü aber mit display:block angezeigt wird, ist die Box um das äußere Menüelement größer, wohlgemerkt nur im IE.

Der relevante Code ist folgender:

<ul class="Nav">
  <li id="navi_link_0"">
    <div><a class="dl" href="index.php" style="font-weight:bold;">Startseite</a></div>
  </li>
  <li id="navi_link_1">

<div><a class="dl" href="termine.php">Termine</a></div>
  </li>
  <li id="navi_link_2">
    <div><a class="dl" href="gesellschaft.php" >Gesellschaft</a></div>
    <ul class="SubNav" id="SubNav_2">
      <li><div><a href="maikoenigspaar.php?jahr=2006">Maik&ouml;nigspaar</a></div></li>
      <li><div><a href="vorstand.php">Vorstand</a></div></li>

<li><div><a href="reiter.php">Reiter</a></div></li>
      <li><div><a href="techniker.php">Techniker</a></div></li>
      <li><div><a href="remmel.php">Remmel</a></div></li>
      <li><div><a href="baumtraeger.php">Baumtr&auml;ger</a></div></li>
      <li><div><a href="liedgut.php">Liedgut</a></div></li>
    </ul>

</li>
  <li id="navi_link_3">
    <div><a class="dl" href="bilder.php">Bilder</a></div>
  </li>
  <li id="navi_link_4";">
    <div><a class="dl" href="statuten.php">Statuten</a></div>
  </li>
  <li id="navi_link_5">

<div><a class="dl" href="geschichte.php">Geschichte</a></div>
    <ul class="SubNav" id="SubNav_5">
      <li><div><a href="vorsitzende.php">Vorsitzende</a></div></li>
      <li><div><a href="koenige.php">Maik&ouml;nigspaare</a></div></li>
      <li><div><a href="ehrennadelraeger.php">Ehrennadeltr&auml;ger</a></div></li>
    </ul>

</li>
  <li id="navi_link_6">
    <div><a class="dl" href="http://forum.maigesellschaft-derichsweiler.de/index.html" title="Forum" target="_blank">Forum</a></div>
  </li>
  <li id="navi_link_7">
    <div><a class="dl" href="links.php">Links</a></div>
  </li>
  <li id="navi_link_8" style="border-bottom: 1px solid black;">

<div><a class="dl" href="kontakt.php">Kontakt</a></div>
  </li>
</ul>

Und der CSS-Teil:

.Nav {
padding-left: 1em;
padding-top: 1em;
margin:0;
}

.Nav li {
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  background:green;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  position: relative;
}
.Nav li div {
  padding:2px;
  padding-left:6px;
}

.SubNav{
  display:block;
  margin: -1px 0px 0px -1px;
  padding:0em;
  position: absolute;
  top: 0em;
  left: 9em;
  border-bottom: 1px solid black;
}

.SubNav li{
  background:white;
  border-left: 0px;
}

.SubNav li div {
  padding: 1px 1em;
}

Es wäre nett, wenn ihr mir helfen könntet.

Danke

Christoph