具有垂直子菜單的CSS水平菜單

Question

我有一個水平菜單，它包含另一個垂直的菜單。它應該看起來像下面，但我沒有成功。有人可以幫忙嗎？我已經嘗試了很多事情，但我只是不知道如何得到它這樣說：

    <ul class="HorizontalList"> 
         <li><a href="#">BOOKS</a> 
          <ul> 
           <li><a>item</a></li> 
           <li><a>item</a></li> 
           <li><a>item</a></li> 
          </ul> 
         </li> 
         <li><a href="#">GAMES</a> 
          <ul> 
           <li><a>item</a></li> 
           <li><a>item</a></li> 
           <li><a>item</a></li> 
          </ul> 
         </li> 

         <li><a href="#">DOWNLOADS</a> 
          <ul> 
           <li><a>item</a></li> 
           <li><a>item</a></li> 
           <li><a>item</a></li> 
          </ul> 
         </li> 
        </ul> 

而CSS：

VerticalList ul { 
    list-style: none; 
    list-style-type: none; 
} 

    .VerticalList li { 
     display: block; 
    } 

.HorizontalList ul { 
    list-style: none; 
    list-style-type: none; 
} 

.HorizontalList { 
    display: inline; 
} 

Answer 1

的HTML代碼必須是：

<ul class="HorizontalList"> 
    <li><a href="#">BOOKS</a> 
     <ul> 
      <li><a>item</a></li> 
      <li><a>item</a></li> 
      <li><a>item</a></li> 
     </ul> 
    </li> 
    <li><a href="#">GAMES</a> 
     <ul> 
      <li><a>item</a></li> 
      <li><a>item</a></li> 
      <li><a>item</a></li> 
     </ul> 
    </li> 

    <li><a href="#">DOWNLOADS</a> 
     <ul> 
      <li><a>item</a></li> 
      <li><a>item</a></li> 
      <li><a>item</a></li> 
     </ul> 
    </li> 
</ul> 

和CSS必須是：

ul { 
    list-style-type:none; 
} 

ul li { 
    display:inline-block; 
    position:relative 
} 
ul li ul { 
    position:absolute; 
    top:/* vary based on the height of the li*/; 
    left:0px; 
}