3 레벨의 정렬되지 않은 목록 스타일링

Question

3 레벨 깊이의 정렬되지 않은 목록이 있습니다. this 2 단계 간단한 드롭 다운 메뉴를 확장하는 드롭 다운 메뉴를 만들려는 스타일입니다. 다음과 같이 CSS는 다음과 같습니다

@CHARSET "ISO-8859-1"; 
/* menu styles */ 

/* Top-level (Styles Works) */ 
#jsddm 
{ margin: 0; 
    padding: 0} 

    #jsddm li 
    { float: left; 
     list-style: none; 
     font: 12px Tahoma, Arial;} 

    #jsddm li a 
    { display: block; 
     /*background: #324143; Old Style*/ 
     background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */; 
     padding: 5px 12px; 
     text-decoration: none; 
     border-right: 1px solid white; 
     width: 70px; 
     /*color: #EAFFED; Default color*/ 
     color: #000099; 
     white-space: nowrap;} 


    #jsddm li a:hover 
    { background: #24313C} 

     /* 2nd-level (Styles Works) */ 
     #jsddm li ul 
     { margin: 0; 
      padding: 0; 
      position: absolute; 
      visibility: visible; 
      border-top: 1px solid white} 

      #jsddm li ul li 
      { float: none; 
       display: inline} 

      #jsddm li ul li a 
      { width: auto; 
       background: #dfeffc; 
       color: #24313C} 

      #jsddm li ul li a:hover 
      { background: #5c9ccc} 

       /* 3rd-level (Doesn't apply styles) */ 
       #jsddm li ul li ul 
       { margin: 0; 
        padding: 0; 
        position: absolute; 
        visibility: hidden; 
        border-top: 2px solid green} 

유행에 따라 디자인하는 처음 두 단계 작동,하지만 3, 나는 내가 올바른 구문을하거나 다른 일이 있다면 내가 부족 있는지 확실하지 않습니다. html은 다음과 같습니다.

<div id="dropDownDiv"> 
     <ul id="jsddm"> 
      <li><a class="btn" href="#">Top Item 1</a> 
       <ul> 
        <li><a id="" class="btn" href="#">2nd Level Item 1</a></li> 
        <li><a href="#">2nd Level Item 2</a></li> 
       </ul> 
      </li> 
      <li><a class="btn" href="#">Top Item 2</a> 
       <ul> 
        <li><a id="" class="btn hide" href="#">2nd Level Item 1</a></li> 
         <ul> 
          <li><a id="" class="btn hide" href="#">3rd Level Item 1</a></li> 
          <li><a id="" class="btn" href="#">3rd Level Item 1</a></li> 
         </ul> 
        <li><a id="" class="btn" href="#">2nd Level Item 1</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

모든 제안 사항에 감사드립니다.

업데이트 :

눈을 내 주셔서 감사합니다. Gareth. 수정 HTML :

 <ul id="jsddm"> 
      <li><a class="btn" href="#">Top Item 1</a> 
       <ul> 
        <li><a id="" class="btn" href="#">2nd Level Item 1</a></li> 
        <li><a href="#">2nd Level Item 2</a></li> 
       </ul> 
      </li> 
      <li><a class="btn" href="#">Top Item 2</a> 
       <ul> 
        <li><a id="" class="btn hide" href="#">2nd Level Item 1</a> 
         <ul> 
          <li><a id="" class="btn hide" href="#">3rd Level Item 1</a></li> 
          <li><a id="" class="btn" href="#">3rd Level Item 1</a></li> 
         </ul> 
        </li> 
        <li><a id="" class="btn" href="#">2nd Level Item 1</a></li> 
       </ul> 
      </li> 
     </ul> 

Answer 1

귀하의 세 번째 수준 ul는 li에 포함되지 않습니다. 그것은 당신의 문제를 일으킬 수 있습니다.