下拉菜單錯誤？

Question

我最近做了一個使用CSS3的垂直下拉菜單。我有一個問題，雖然：第一個子類別將顯示在懸停，但第二個只應顯示當你移動到第一個嵌套ul。您可以在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> 

TO

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

之後修正了一些CSS樣式level2的菜單和3級菜單的位置。 see demo in jsfiddle

更改菜單leve2的位置：

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

，並添加一些樣式菜單3級

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

隱藏菜單3級時，懸停菜單（第一級）

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

但顯示它當懸停菜單級別2時：

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

see demo in jsfiddle