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

[pad8626]

Vielleicht steh ich aufm schlauch aber warum nimmst du eine Liste ??
Und der Browser versteht aber a:hover.

[Christoph]

Vielleicht steh ich aufm schlauch aber warum nimmst du eine Liste ??
Und der Browser versteht aber a:hover.

Ich will durch die Liste das Menü inhaltlich auszeichnen. Dafür sind die Tags in HTML doch da. Ein Menü ist halt ne unsortierte Liste von Menüpunkten.

Ich hatte gehofft, ich müsste im HTML-Code an sich nix ändern und bloß für den IE verständliches CSS schreiben.

[Christoph]

Ich hab's gelöst. Es lag an den divs, die haben IE wohl durcheinander gebracht.

Danke.