div innnerhalb von Navi-Liste, wo ist die "HTML-Schutz-Polizei"

[Texter mit x]

Ein paar Beispiele? Drei, zwanzig? Welchen Ansatz hast Du denn im Hinterkopf? Einen flexiblen?

Hier ein paar Variationen von zwei Ansätzen:

  <ul id="navi_fix_1">  
    <li>  
      <span>naviA1</span>  
      <ul id="sub_navi">  
        <li><a href="">sub_naviA1_1</a></li>  
        <li><a href="">sub_naviA1_2</a></li>  
        <li><a href="">sub_naviA1_3</a></li>  
      </ul>  
    </li>  
    <li><a href="">naviA2</a></li>  
    <li><a href="">naviA3</a></li>  
  </ul>  
  <ul id="navi_fix_2">  
    <li><a href="">naviB1</a></li>  
    <li><a href="">naviB2</a></li>  
    <li><a href="">naviB3</a></li>  
    <li><a href="">naviB4</a></li>  
  </ul>

CSS float-Variationen:

#navi_fix_1 {  
  float: left;  
}

(hier wird die die Hauptnavigation #navi_fix_1 nicht in einer Zeile dargestellt*)

#navi_fix_1, #navi_fix_1 li {  
  float: left;  
}

(hier wird die die Hauptnavigation #navi_fix_1 in einer Zeile dargestellt aber der Platz (Breite) den die sub_navi einnimmt bleibt in der Hauptnavi frei*)

CSS Variationen mit position:

#navi_fix_1 {  
  float: left;  
}  
  
#sub_navi {  
  position:absolute; top:3em; left:0px;  
}

(hier überlappen sich Elemente, wenn ein Zeilenumbruch erfolgt und auch schon vorher, wenn die sub_navi breiter ist als die Hauptnavigation und der viewport entsprechend schmal ist*)

#navi_fix_1, #navi_fix_1 li {  
  float: left;  
}  
  
#sub_navi {  
  position:absolute; top:3em; left:0px;  
}

(hier überlappen sich die Elemente, bei geeignetem Zeilenabstand, nicht**, wenn ein Zeilenumbruch erfolgt aber auch schon vorher, wenn die sub_navi breiter ist als die Hauptnavigation*)

weiteres CSS für alle gleich:

#navi_fix_1, #navi_fix_2, #sub_navi {  
  list-style-type:none;  
  line-height:3em;  
  margin:0px;  
  padding:0px;  
}  
  
#navi_fix_2 {  
  width:30%;  
  float: right;  
}  
  
#navi_fix_1 li, #navi_fix_2 li, #sub_navi li {  
  list-style:none;  
  margin:15px 0px 15px 30px;  
  display: inline;  
}  
  
#navi_fix_1 a, #navi_fix_2 a, #sub_navi li a, #navi_fix_1 span, #navi_fix_2 span, #sub_navi span{  
  text-decoration:none;  
  padding:5px 8px;  
  border:1px solid #000;  
}

* was so weit logisch ist

** Die abwechselnde Anordnung von Elementen der Haupt- und der Subnavi ist aber etwas - naja, wer das Fenster so schmal macht, wird vielleicht damit leben müssen.

Das verhält sich in den verschiedenen Browsern (IE habe ich vorerst nur die 6 testen können) auch weitgehend gleich. Von diesen Variationen ausgehend habe ich verschiedenes versucht, aber die grundlegenden Probleme, so sich überhaupt eine Auswirkung zeigt, bleiben gleich.

Von der ersten Variation ausgehend will ich noch versuchen die Elemente der Hauptnavigation, absolut positioniert, von der dritten in die erste Zeile zu bekommen. Aber davon verspreche ich mir mindestens so viele Nachteile wie von den anderen Lösungen mit absoluter Positionierung.

Bei Opera (immer in der rechten #navi_fix_2) und bei manchen Varianten beim IE (beide navi_fix) fallen nur die umbrechenden Rahmen und "eigenwilligen" Einrückungen bei Zeilenumbrüchen negativ auf, aber das hat mit dem eigentlichen Problem nichts zu tun.

PS.: Das mit den noch vor dem Umbruch überlappenden Elementen (bei absolut positionierter sub_navi) habe ich teilweise in den Griff bekommen. Ich hatte die Breite der nav_fix_1 statt der sub_navi zugewiesen.
hinzugefügt:

#sub_navi {  
  width:60%;  
}