使用HTML / CSS的分层列表

时间:2011-06-05 18:51:01

标签: html css html5

我正在尝试创建一个顶级菜单,就像你在大多数应用程序中看到的一样,使用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>

1 个答案:

答案 0 :(得分:4)

<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