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

[Texter mit x]

Nachdem ich die letzten Tage viel versucht habe, suche ich noch mal nach Rat.

Die bisher nur optisch differenzierten Bereiche der Navigation habe ich nun in entsprechendes HTML gegossen. Eine Navigation (navi_fix_1) mit Unterpunkten (sub_navi) und eine ohne Unterpunkte (navi_fix_2):

  <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="index2.htm">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>

(Die Navigation navi_fix_2 ist zwar wie die navi_fix_1 immer gleich, man könnte also denken es ist nur eine Navigation, sie ist aber für einen anderen "Themen"-Bereich (seitenthemen-unspezifische Navigationspunkte wie Impressum u.s.w.) und hat keine Unterpunkte.)

Alle Navigationspunkte eines "Bereiches" sollen horizontal, also je Bereich in einer Zeile, dargestellt werden (solange es nicht zum Umbruch kommt). Die navi_fix_1 soll in der ersten Zeile und sub_navi in einer Zeile darunter dargestellt werden. Die navi_fix_2 soll rechts neben navi_fix_1 und bub_navi dargestellt werden und dazu in der Breite begrenzt (was auch schon bei relativ breitem viewport und vier Navigationspunkten gewollt zum Zeilenumbruch führt).

so soll es aussehen:
naviA1 naviA2 naviA3                                naviB1 naviB2
sub_naviA1_1 sub_naviA1_2 sub_naviA1_3 naviA2       naviB3 naviB4

(Auch bei der Verringerung der Breite des viewports sollte, muß aber nicht, naviA2 und naviA3 oberhalb der sub_navi dargestellt werden.)

Aus Versehen, und für mich nicht recht nachvollziehbar, habe ich diese Darstellung mit folgenden CSS im FF2 und IE6 erreicht.

#navi_fix_1, #navi_fix_2, #sub_navi {  
  list-style-type:none;  
  line-height:2.5em;  
  margin:0px;  
  padding:0px;  
}  
  
#navi_fix_1, #sub_navi {  
  float: left;  
}  
  
#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;  
}  
  
.clear {  
  clear:both;  
  display:block;  
}

Im FF3 und FF3.5 sowie aktuellem Opera sieht es aber unbrauchbar aus, wobei das (ungewollte) Ergebnis von FF3.5 und Opera bei dem CSS nachvollziehbar ist. Dummerweise habe ich die vielen anderen Versuche nicht mit den aktuellen Browsern testen können und habe diese auch nicht gespeichert. Ich hatte nicht damit gerechnet, daß sich die Darstellungen zwischen FF2, 3 und 3.5 bei so überschaubarem CSS so unterscheiden.

Nun die Frage, wie bekomme ich die sub_navi, als Liste innerhalb einer Liste, ohne absolute Positionierung in eine Zeile unter die navi_fix_1?

Meine bisherigen Versuche waren zwar gezielt aber auf logischem Weg sehe ich eigentlich keine Möglichkeit und das Ergebnis des obigen Beispiels im FF2 hat mich schon überrascht. Die sub_navi als dritte Liste, statt als Liste in Liste, wären eine Notlösung die bestimmt nicht gutgeheißen wird.