具有垂直子菜单的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; 
}