드롭 다운 메뉴 오류?

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 코드를 수정해야합니다. 즉 레벨 2 메뉴 LEVEL3 메뉴의 위치를 ​​일부 CSS 스타일을 수정 한 후 </li></a>의 문제는

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

에게 </a></li>

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

으로 수정해야합니다. 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 호버 메뉴 레벨 1

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

하지만 디스플레이를 몇 가지 스타일을 추가 마우스 오버시 메뉴 레벨 2 :

도움을

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

see demo in jsfiddle