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} 

スタイリングは、最初の2つのレベルの作品ではなく、第三のために、私は正しい構文を持っているか、何か他のものがあるかどう私が欠けているかはわかりません。 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> 

いずれかの提案があります。

UPDATE：ガレス私はあなたの目を貸しため

感謝。修正された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

あなたの第3レベルulはli内に含まれていません。それはあなたの問題を引き起こしているかもしれません。