Ошибка выпадающего меню?

Question

Недавно я создал вертикальное выпадающее меню, используя CSS3. У меня проблема: первая подкатегория будет отображаться при наведении, но вторая должна отображаться только при переходе на первую вложенную улицу. Вы можете просмотреть следующий код в действии: Mac-Resources. Ниже моя нав структура:

<nav> 
<ul> 
    <li><a href="#"><span></span>Aktuelles</a> 
     <ul>  
      <li><a href="#"><span></span>Termine</li></a> 
      <li><a href="#"><span></span>Archiv</li></a> 
     </ul></li> 
    <li><a href="#"><span></span>Schule in Aktion</a> 
     <ul> 
      <li><a href="#"><span></span>hEImun</a> 
       <ul>  
        <li><a href="#"><span></span>What is MUN?</li></a> 
        <li><a href="#"><span></span>What is hEImun?</li></a> 
        <li><a href="#"><span></span>Schedule</li></a> 
        <li><a href="#"><span></span>Accomodations</li></a> 
       </ul></li> 
      <li><a href="#"><span></span>AGs, AGs, AGs</li></a> 
      <li><a href="#"><span></span>Begabtenf&ouml;rderung</li></a> 
      <li><a href="#"><span></span>Wettbewerbe</li></a> 
      <li><a href="#"><span></span>Theater</li></a> 
      <li><a href="#"><span></span>Milchbar</li></a> 
      <li><a href="#"><span></span>Oberstufe</li></a> 
      <li><a href="#"><span></span>Compassion</li></a> 
      <li><a href="#"><span></span>BOGY</li></a> 
      <li><a href="#"><span></span>Sport</li></a> 
      <li><a href="#"><span></span>Unterrichtsprojekte</li></a> 
     </ul></li> 
    <li><a href="#"><span></span>Unterrichtsangebot</a> 
     <ul>  
      <li><a href="#"><span></span>Profile</li></a> 
      <li><a href="#"><span></span>Der Bilinguale Zug</li></a> 
      <li><a href="#"><span></span>Ganztageszug</li></a> 
      <li><a href="#"><span></span>Methodencurriculum</li></a> 
      <li><a href="#"><span></span>Interne Regelungen</li></a> 
      <li><a href="#"><span></span>Grundschule</li></a> 
      <li><a href="#"><span></span>Englisch-Zertifikate</li></a> 
     </ul></li> 
    <li><a href="#"><span></span>P&auml;dagogik</a> 
     <ul>  
      <li><a href="#"><span></span>Bausteine</li></a> 
      <li><a href="#"><span></span>Soziales Lernen</li></a> 
      <li><a href="#"><span></span>Beratungsm&ouml;glichkeiten am E.I.</li></a> 
      <li><a href="#"><span></span>Ganzheitliche Lernberatung</li></a> 
      <li><a href="#"><span></span>Compassion</li></a> 
      <li><a href="#"><span></span>Suchtprophylaxe</li></a> 
      <li><a href="#"><span></span>Anti-Gewaltprojekte</li></a> 
      <li><a href="#"><span></span>P&auml;dagogische Tage und Vortr&auml;ge</li></a> 
     </ul></li> 
    <li><a href="#"><span></span>&Uuml;ber uns</a> 
     <ul>  
      <li><a href="#"><span></span>Unsere Idee von Schule</li></a> 
      <li><a href="#"><span></span>Leitbild und Qualit&auml;t</li></a> 
      <li><a href="#"><span></span>Schulleitung und Kollegium</li></a> 
      <li><a href="#"><span></span>Qualit&auml;tsentwicklung</li></a> 
      <li><a href="#"><span></span>Aufnahme am E.I.</li></a> 
      <li><a href="#"><span></span>Elternbeitr&auml;ge</li></a> 
      <li><a href="#"><span></span>Mitwirkung der Eltern</li></a> 
      <li><a href="#"><span></span>Mitwirkung der Sch&uuml;ler</li></a> 
      <li><a href="#"><span></span>Gremien</li></a> 
      <li><a href="#"><span></span>Freundeskreis</li></a> 
      <li><a href="#"><span></span>Milchbar</li></a> 
      <li><a href="#"><span></span>Geschichte</li></a> 
      <li><a href="#"><span></span>Die Schulgr&uuml;nderin</li></a> 
     </ul></li> 
    <li><a href="#"><span></span>Schulweb</li></a> 
    <li><a href="#"><span></span>E.I. unterwegs</li></a> 
</ul> 

А вот CSS разметка:

nav { 
    position: absolute; 
} 

nav ul { 
    list-style-type: none; 
    list-style-image: none; 
    margin: 0px; 
    padding: 0px; 
    } 

nav ul li { 
    position: relative; 
} 

nav a { 
    color: #FFFFFF; 
    display: block; 
    text-decoration: none; 
    transition: background 0.5s; 
    -moz-transition: background 0.5s; 
    -webkit-transition: background 0.5s; 
    font-family: tahoma; 
    font-size: 12pt; 
    padding: 7px; 
    } 

nav a:hover { 
    background: #fcc74b; 
    color:#FFFFFF; 
    } 

nav ul li:hover ul { 
    display:block; 
    } 

nav ul ul { 
    position: absolute; 
    left: 210px; 
    top:0; 
    display: none; 
    } 

nav ul ul li { 
    width: 200px; 
    background: #99CC33; 
    } 

nav ul ul li a { 
    color:#FFFFFF; 
    font-size:12px; 
    text-transform:none; 
    border-right: 1px solid #000000; 
    border-left: 1px solid #000000; 
    } 

nav ul ul li a:hover { 
    color: #FFFFFF; 
    } 

nav span { 
    width:12px; 
    height:12px; 
    background:#fff; 
    display:inline-block; 
    float:left; 
    margin-top:3px; 
    margin-right:20px; 
    position:relative; 
    transition:all 0.5s; 
    -moz-transition:all 0.5s; 
    -webkit-transition:all 0.5s; 
    } 

nav a:hover span { 
    background: #003399; 
    transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
    } 

Вся помощь очень ценится!

Answer 1

Вы должны исправить свой html-код. Проблема в </li></a> должны исправить, чтобы </a></li>

<li><a href="#"><span></span>Termine</li></a> 

К

<li><a href="#"><span></span>Termine</a></li> 

после этого исправить некоторые CSS стиль для позиции меню level2 и меню LEVEL3. see demo in jsfiddle

изменить положение меню leve2:

nav ul ul { 
    position: absolute; 
    left: 180px; 
    top:0; 
    display: none; 
} 

И добавить стиль для меню level3

nav ul ul ul { 
    position: absolute; 
    left: 200px; 
    top:0; 
    display: none; 
} 

Скрыть меню LEVEL3 когда меню парения level1

nav ul li:hover ul ul { 
    display:none; 
} 

но дисплей это при наведении на уровень меню2:

nav ul li ul li:hover ul{ 
    display:block; 
} 

see demo in jsfiddle