造型三级无序列表

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} 

的造型适用于前两个级别，而不是第三，我不知道我是否有语法正确，或者还有别的我失踪。 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内。这可能会导致你的问题。