CSS 드롭 다운 메뉴 항목이 서로 겹치기

Question

suckerfish를 기반으로하는 드롭 다운 메뉴를 만들고 있습니다. 최상위 수준은 올바르게 표시되지만 첫 번째 하위 메뉴 수준은 최상위 수준 아래에 서로의 위에 쌓인 모든 메뉴 항목을 배치합니다. 항목이 겹치는 경우를 제외하고는 모두 정확합니다. 내 HTML과 CSS는 아래 있습니다.

<ul id="nav"> 
    <li style="border-left: none;"> 
     <link here> 
     <ul> 
      <li> 
       <link here> 
       <ul> 
        <li> 
         <link here> 
        </li> 
       </ul> 
       <ul> 
        <li> 
         <link here> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <link here> 
       <ul> 
        <li> 
         <link here> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <link here> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <link here> 
     <ul> 
      <li> 
       <link here> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <link here> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <link here> 
    </li> 
    <li> 
     <link here> 
    </li> 
    <li> 
     <link here> 
    </li> 
    <li> 
     <link here> 
    </li> 
</ul> 


#nav, #nav ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

#nav a { 
    display: block; 
} 

#nav li { 
    float: left; 
    padding: 0px 10px 0px 10px; 
} 

#nav li ul { 
    position: absolute; 
    width: 200px; 
    color: #FFF; 
    background-color: #000; 
    left: -999em; 
} 

#nav li:hover ul { 
    left: auto; 
} 

#nav li:hover ul, #nav li.sfhover ul { 
    left: auto; 
} 

#nav li ul ul { 
    margin: -1em 0 0 10em; 
} 

#nav, #nav ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    line-height: 1; 
} 

#nav li:hover ul ul, #nav li.sfhover ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { 
    left: auto; 
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
    left: auto; 
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul { 
    left: auto; 
} 

내 CSS는 suckerfish에서 바로 가져옵니다. 너비와 배경색과 같은 몇 가지 작은 변화가 있지만 직접 복사 한 경우에도 문제가있었습니다. 현재 파이어 폭스에서이 문제를 해결하기 위해 노력하고 있습니다. 모든 브라우저에서 똑같은 문제가 발생합니다.

그냥이 사이트의 CMS로 umbraco를 사용하고 있으며 메뉴에 대한 html을 생성 중입니다. 내가 여기 새로 왔을 때 게시 할 수없는 실제 링크가 있으며 hfer 속성 만 포함되어 있습니다.

감사

Answer 1

지금까지 내가 suckerfish 기술은 이중 중첩 된 목록을 지원하지 않습니다 알고. 즉, UL은 원하는만큼 깊게 중첩 될 수 있지만 (CSS가 물론 지원하는 경우), 동일한 수준의 스타일 2 UL은 할 수 없습니다.

수정 된 HTML (이중 중첩 UL 없음)을 확인하십시오.

<ul id="nav"> 
    <li style="border-left: none;"> 
     <a href="#">Test link</a> 
     <ul> 
      <li> 
       <a href="#">Test link</a> 
      </li> 
      <li> 
       <a href="#">Test link</a> 
      </li> 
      <li> 
       <a href="#">Test link</a> 
       <ul> 
        <li> 
         <a href="#">Test link 1</a> 
        </li> 
        <li> 
         <a href="#">Test link 2</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Test link</a> 
     <ul> 
      <li> 
       <a href="#">Test link</a> 
       <ul> 
        <li> 
         <a href="#">Test link 1</a> 
        </li> 
        <li> 
         <a href="#">Test link 2</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

또한 check it online 일 수 있습니다.

참고로, 항목 및 두 번째 수준의 UL에 대한 CSS는 약간의 작업이 필요합니다 (현재 볼 수있는 방식에 따라 틀리다).