Liste mit Unterlisten in einer Zeile

[Scoobay]

Hiho,
wenn man sauber HTML-Coden will sollte man ja Navigationslisten auch als Listen behandeln. Also sieht meine Navigation gerade wie folgt aus.

<div id="navigation">
<ol>
<li>Punkt 1</li>
<li>Punkt 2
<ol>
<li>Punkt 2.1</li>
<li>Punkt 2.2</li>
</ol>
</li>
<li>Punkt 3</li>
</ol>
</div>

Damit das schön aussieh soll das alles in eine Zeile. Dazu sieht der CSS Code so aus:

#navigation ol{
list-style-type:none;
display:block;
padding:0;
margin:0;
}

#navigation li{
display:block;
float:left;
position:relative;
font-size:18px;
}

#navigation li li{
font-size:12px;
}

Die oberste Liste wird auch noch ordentlich in einer Zeile angezeigt. Jedoch wandert die Unterliste (Punkt 2.x) unter Punkt 2. Sie soll jedoch aber mit den anderen in einer Reihe stehen.
Kennt jemand einen Trick?

mfg

 

[dkdenz]

Erstmal bitte beachten: http://forum.jswelt.de/css-x-html/26808-bitte-lesen-vereinfachung-hilfestellungen.html
Zweitens ergibt Deine Idee für mich keinen Sinn.
Wieso soll man sich solch ein Szenario ausdenken?
Drittens geht das m. E. nach nicht auf herkömmlichen Wege, weil es ja auch unlogisch ist.

 

[anna55]

Kennt jemand einen Trick?

Du meinst vielleicht, dass die Unterpunkte ebenfalls linksbündig stehen?
Versuchs mal mit diesem CSS:

html, body{
margin:0;
padding:0;
}
#navigation ol{
list-style-type:none;
display:block;
padding:0;
margin:0;
}
#navigation li{
display:block;
float:left;
font-size:18px;
}
#navigation li li{
font-size:12px;
}
#navigation li ol{
position:absolute; 
top:20px; 
left:0; 
}

 

[Scoobay]

Wieso soll man sich solch ein Szenario ausdenken?

Naja -ich will ja alles möglichst barrierefrei und so machen. Und inhaltlich macht es für mich auch durchaus sinn, dass ein Navigationselement noch Unterpunkte hat, oder was meinst du?
Und da ich genug platz in der Horizontalen habe, möchte ich den auch gerne nutzen.

Du meinst vielleicht, dass die Unterpunkte ebenfalls linksbündig stehen?
Versuchs mal mit diesem CSS:

#navigation li ol{
position:absolute; 
top:20px; 
left:0; 
}

Netter Trick, allerdings verhindert das position:absolute, dass die ol-Liste dann noch die anderen übergeordneten li-Items verschiebt. So schwebt sie einfach drüber und sie überlappen sich.

Theoretisch würde display:inline-block funktionieren. Das ist leider aber nicht kompatibel genug.

 

[anna55]

Netter Trick, allerdings verhindert das position:absolute, dass die ol-Liste dann noch die anderen übergeordneten li-Items verschiebt. So schwebt sie einfach drüber und sie überlappen sich.

Hä? Hast Du Dir mal meinen restlichen Code angesehen? Ich habe z.B. bei #navigation li

position:relative;

rausgenommen.

 

[dkdenz]

Naja -ich will ja alles möglichst barrierefrei und so machen. Und inhaltlich macht es für mich auch durchaus sinn, dass ein Navigationselement noch Unterpunkte hat, oder was meinst du?
Und da ich genug platz in der Horizontalen habe, möchte ich den auch gerne nutzen.

Für mich macht das leider keinen Sinn.
Unterpunkte sind Unterpunkte. Fertig.
Wenn das Alles in der Horizontalen ablaufen soll, dann ist das natürlich Dein Ding.
Wenn Du aber mal das Menü erweitern musst und der Platz dann nicht mehr ausreicht, dann frickelst Du das Alles wieder um.
Mit Barrierefreiheit hat Dein Ansinnen nichts zu tun.
Du solltest auch die Semantik und die Gewohnheiten der User nicht außer 8 lassen.