Überkreuz-Navi in EINER verschachtelten Liste

[Marc]

Hallo nochmal,

Vielleicht kann mir einer etwas erklären. Um mir den Textfluss in den Listen nicht zu verändern, habe ich die zweite Menüebene noch in ein div gepackt. Verschiebe ich das div nun, sollte sich doch an den Listen gar nichts mehr ändern, dass heißt, sie sollten wie üblich dargestellt werden.

Die erste Ebene habe ich zwar gefloatet, aber das habe ich mit float:none; wieder zurückgesetzt. Es wird auch nichts mehr gefloatet.

Das div, in dem sich die Menüebenen 2 bis x befinden, positioniere ich nicht einmal mehr mit position. Ich hebe die vorherige absolute Positionierung mittels position:static auf.

Nun ist dieses div auch so hoch wie die zweite Menüebene, die dritte menüebene bricht aber vollkommen aus. Sie wird nicht innerhalb der zweiten Menüebene angezeigt und wirkt sich offenbar auch nicht auf die Höhe des umgebenden div aus.

zur Verdeutlichung zwei Bilder:
Im FF:

Im IE7:

Der HTML-Code:

  
<ul id="navLevel1">  
 <li class="cur"><span>Hintergrund</span>  
  <div id="navLevel2">  
   <ul>  
    <li><a href="#">Menüpunkt Nummer 2.1</a></li>  
    <li>  
     <a href="#">Menüpunkt Nummer 2.2</a>  
     <ul>  
      <li><a href="#">Menüpunkt Nummer 3.1</a></li>  
      <li><a href="#">Menüpunkt Nummer 3.2</a></li>  
      <li><a href="#">Menüpunkt Nummer 3.3</a></li>  
      <li><a href="#">Menüpunkt Nummer 3.4</a></li>  
     </ul>  
    </li>  
    <li><a href="#">Menüpunkt Nummer 2.3</a></li>  
   </ul>  
  </div></li>  
 <li><a href="#"><span>Regionen</span></a></li>  
 <li><a href="#"><span>Beispiele</span></a></li>  
 <li><a href="#"><span>Partner</span></a></li>  
 <li><a href="#"><span>Service</span></a></li>  
</ul>  

Der CSS-Code

  
/* 1. Level of main navigation (located in header) */  
  
ul#navLevel1 {  
 position:absolute;  
 top:132px;  
 left:248px;  
 min-width:60em;  
 list-style-type:none;  
}  
  
ul#navLevel1 li {  
 float:left;  
 width:11.2em;  
 height:36px;  
 margin-right:8px;  
}  
  
ul#navLevel1 li.cur {  
 height:24px;  
 padding-top:12px;  
 background-image:url(../images/layout/nav_e1_a.gif);  
}  
  
ul#navLevel1 li.cur span {  
 padding-left:12px;  
 font-size:1.2em;  
 color:#f1f4f6;  
 font-weight:bold;  
 background-image:url(../images/layout/nav_e1_bullet_a.gif);  
 background-repeat:no-repeat;  
 background-position:0 2px;  
}  
  
ul#navLevel1 li a {  
 float:left;  
 width:11.2em;  
 height:24px;  
 padding-top:12px;  
 color:#f1f4f6;  
 background-image:url(../images/layout/nav_e1.gif);  
 background-repeat:repeat-x;  
}  
  
ul#navLevel1 li a span {  
 padding-left:15px;  
 font-size:1.2em;  
 color:#f1f4f6;  
 font-weight:bold;  
 background-image:url(../images/layout/nav_e1_bullet.gif);  
 background-repeat:no-repeat;  
 background-position:0 2px;  
}  
  
ul#navLevel1 li a:active,  
ul#navLevel1 li a:focus,  
ul#navLevel1 li a:hover {  
 background-image:url(../images/layout/nav_e1_r.gif);  
 text-decoration:none;  
}  
  
ul#navLevel1 li a:active span,  
ul#navLevel1 li a:focus span,  
ul#navLevel1 li a:hover span {  
 background-image:url(../images/layout/nav_e1_bullet_r.gif);  
}  
  
/* Main navigation level 2 to 4 (located in navLevel2 area) */  
  
ul#navLevel1 li.cur div#navLevel2 {  
 position:static;  
 margin-left:-248px;  
 border:1px solid red;  
 clear:both;  
}  
  
ul#navLevel1 li.cur div#navLevel2 ul {  
 position:static;  
 width:24.8em;  
 padding-top:0.8em;  
}  
  
div#navLevel2 li {  
 float:none;  
 position:static;  
 width:9.5em;  
 height:2.4em;  
 margin-bottom:8px;  
 padding-right:115px;  
 background-image:url(../images/layout/nav_e2_ecke_gelbblau.gif);  
 background-repeat:no-repeat;  
 background-position:right;  
}  
  
div#navLevel2 ul li a {  
 display:block;  
 width:18.9em;  
 height:2.4em;  
 padding-top:4px;  
 font-size:1.1em;  
 font-weight:bold;  
 color:#f1f4f6;  
 padding-left:16px;  
 background-image:url(../images/layout/nav_e2_bullet.gif);  
 background-repeat:no-repeat;  
 background-position:0 4px;  
}  
  
div#navLevel2 ul li ul li:active,  
div#navLevel2 ul li:focus,  
div#navLevel2 ul li:hover {  
 width:12em;  
 background-image:url(../images/layout/nav_e2_ecke_gelbblau_r.gif);  
 text-decoration:none;  
}  
  
div#navLevel2 ul li a:active,  
div#navLevel2 ul li a:focus,  
div#navLevel2 ul li a:hover {  
 background-image:url(../images/layout/nav_e2_bullet_r.gif);  
 text-decoration:none;  
}  

Kann mir einer das Verhalten der Browser erklären? ...

Viele Grüße,
Marc.