CSS Tree menue falsch eingerückt, bleibt nicht aufgeklappt

[qx]

Hola ita2001,

ich habe den code mal auf das notwendige rezuziert, somit fällt die Übersicht leichter.

ol {  
  list-style: none;  
  position: relative;  
  width: 300px;  
}  
li input {  
  position: absolute;  
  opacity: 0;  
}  
li input + ol > li { display: none }  
li label {  
  display: block;  
  cursor: pointer;  
  font-weight: bold;  
}  
  
li input:checked + ol > li { display: block; margin: 0 0 0.125em; }  
li input:checked + ol > li:last-child { margin: 0 0 0.063em; }  
  
.dino {display: none}  
.dino:target {display: block}

<ol>  
  <li>  
    <label for="haupt1">haup1</label><input type="checkbox" id="haupt1" />  
    <ol>  
      <li>  
        <label for="unter1">unter1</label><input type="checkbox" id="unter1" />  
        <ol>  
          <li><a href="#unter1_1">unter1_1</a></li>  
          <li><a href="#unter1_2">unter1_2</a></li>  
        </ol>  
      </li>  
      <li>  
        <label for="unter2">unter2</label><input type="checkbox" id="unter2" />  
        <ol>  
          <li><a href="#unter2_1">unter2_1</a></li>  
          <li><a href="#unter2_2">unter2_2</a></li>  
          <li>  
            <label for="unter2_3">unter2_3</label><input type="checkbox" id="unter2_3" />  
            <ol>  
              <li><a href="#unter2_3_1">unter2_3_1</a></li>  
              <li><a href="#unter2_3_2">unter2_3_2</a></li>  
            </ol>  
          </li>  
          <li><a href="#unter2_4">unter2_4</a></li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
  <li><a href="#haupt2">haupt2</a></li>  
  <li><a href="#haupt3">haupt3</a></li>  
</ol>  
  
<div id="haupt2" class="dino">haupt2 Inhalt</div>  
<div id="haupt3" class="dino">haupt3 Inhalt</div>  
  
<div id="unter1_1" class="dino">unter1_1 Inhalt</div>  
<div id="unter1_2" class="dino">unter1_2 Inhalt</div>  
  
<div id="unter2_1" class="dino">unter2_1 Inhalt</div>  
<div id="unter2_2" class="dino">unter2_2 Inhalt</div>  
  
<div id="unter2_3_1" class="dino">unter2_3_1 Inhalt</div>  
<div id="unter2_3_2" class="dino">unter2_3_2 Inhalt</div>  
  
<div id="unter2_4" class="dino">unter2_4 Inhalt</div>

grüsse und viel Spass damit
qx