Verschachtelte Div in Navigation

Hallo,

ich hoffe ich bin im richtigen Teil des Forums. Habe nämlich folgendes (css) Problem:

Meine Ausgabe für die Navigation sieht so aus:

<div id="navigation">
<div class="level1">
  Link 1.1
  Link 1.2
  <div class="level2">
    Link 1.2.1
    Link 1.2.2
     Link 1.2.3
    <div class="level3">
      Link 1.2.3.1
      Link 1.2.3.2
    </div>
    Link 1.2.4
  </div>
  Link 1.3
  Link 1.4
</div>
</div>

Es fabriziert mit folgenden Stylesheet definitionen

#navigation {
    width: 100%;
    background-color: #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    float: left;
}
.level1 {
    background-color: #999966;
    width: 920px;
    float: none;
}
.level2 {
    background-color: #99FF33;
    width: 560px;
    float: right;
}
.level3 {
    color: #333333;
    float: right;
    width: 300px;
    background-color: #CCFF00;
}

diese Ausgabe:

Level 1        Level 2        Level 3
+--------------+--------------+--------------+
| Link 1.1     |              |              |
| Link 1.2     | Link 1.2.1   |              |
| Link 1.3     | Link 1.2.2   |              |
| Link 1.4     | Link 1.2.3   | Link 1.2.3.1 |
|              | Link 1.2.4   | Link 1.2.3.2 |
+--------------+--------------+--------------+

Ich möchte aber gerne diese Ausgabe haben:

 Level 1        Level 2        Level 3
+--------------+--------------+--------------+
| Link 1.1     | Link 1.2.1   | Link 1.2.3.1 |
| Link 1.2     | Link 1.2.2   | Link 1.2.3.2 |
| Link 1.3     | Link 1.2.3   |              |
| Link 1.4     | Link 1.2.4   |              |
+--------------+--------------+--------------+

Das heißt, wenn ich in Level 1 einen Link auswähle, öffnet sich Level2, usw.
Muß dafür aber auf absolute Angaben für die y-position verzichten, da sonst, wenn ich es richtig verstanden habe, der unter der Navigation liegende Inhalt nicht an der Größe der Navigation ausgerichtet wird.

Kann mir jemand weiterhelfen?

Vielen Dank und beste Grüße,

Viktor

Hallo Viktor,

nur mal eine Idee: wenn du für jede ebene einen eigenen Marker und eigenes Menü hast, dann wirds wohl keine Probleme geben

lg georg

Hallo Georg,

Das wollte ich machen, wenn absolut nichts mehr geht. Wollte halt die logische Struktur der Navigation beibehalten. Ich dachte es gibt über css vielleicht eine Möglichkeit das hinzubekommen.

Vielen Dank.

Beste Grüße,

Viktor

Hallo,

nun du behältst ja noch immer die logische Struktur bei, da seh ich kein Problem. Halt jede ebene eigenen Marker, siehe hier: #25103

lg georg

Hallo Georg,

danke für deine Hilfe! Ich weiß nicht, ob ich dich nicht vielleicht mißverstanden habe... Ich meine die Navigationsstruktur die im Browser ausgegeben wird. Diese könnte ja z.B. auch über eine Liste erzeugt werden. Wichtig ist mir, das z.B. Screenreader diese Navigationslogik verstehen. Das wäre, wenn ich dich richtig verstehe, mit der Aufspaltung der Navigation in der Ausgabe ja nicht der Fall, oder? Dann gibt es, ja keinen Bezug mehr zwischen den einzelnen Levels, wenn sie ausgegeben werden und auf einzelne Subparts verteilt werden. Ich hätte gerne eine verschachtelte Struktur, die aber mit css die Levels unabhängig von einander darstellen läßt.

Beste Grüße,

Viktor

ok sorry da hast du natürlich recht!