使用HTML/CSS的分層列表

Question

我想創建一個頂級菜單，就像你會在大多數應用程序中看到的一樣，使用HTML，CSS & Javascript。我知道有很多預製的，但我想創建自己的。

---------------------- 
| File | Edit | Help | 
---------------------- 
| New  | 
| Save | 
| Save As | 
--------- 

我一直在嘗試各種CSS樣式，以正確地佈局以下列表。這是適當的HTML結構，還是您會推薦一個不同的結構？需要哪些CSS才能正確佈局菜單？我現在不關心功能。

我對任何HTML 5技術開放，因爲這只是一個個人的項目。

<ul> 
    <li>File</li> 
    <ul> 
     <li>New</li> 
     <li>Save</li> 
     <li>Save As</li> 
    </ul> 
    <li>Edit</li> 
    <ul> 
     <li>Cut</li> 
     <li>Copy</li> 
     <li>Paste</li> 
    </ul> 
    <li>Help</li> 
    <ul> 
     <li>About</li> 
    </ul> 
</ul> 

Answer 1

<ul> 
    <li> 
     <a href="#">File</a> 
     <ul> 
      <li><a href="#">New</a></li> 
      <li><a href="#">Save</a></li> 
      <li><a href="#">Save As</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Edit</a> 
     <ul> 
      <li><a href="#">Cut</a></li> 
      <li><a href="#">Copy</a></li> 
      <li><a href="#">Paste</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Help</a> 
     <ul> 
      <li><a href="#">About</a></li> 
     </ul> 
    </li> 
</ul> 

在樣品到這裏看看：

http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery