Question

我所追求的是将顶级ul li水平放置，然后垂直布局，最好在水平下降时略微缩进，在其父li下。

没有任何悬停功能，只是一个不错的布局，如下所示：

Top Item 1       Top Item 2      Top Item 3
 sub item 1       sub item 1      sub item 1
 sub item 2       sub item 2      sub item 2
  sub sub item 1  sub item 3      sub item 3
  sub sub item 2  sub item 4      sub item 4
 sub item 5       sub item 5      sub item 5

Answer 1

这个怎么样：

Live Demo

<强> CSS：

#footer {
    overflow: auto;
    background: #ddd
}
.outer {
    list-style: none;
    width: 33%;
    float: left;
    margin: 0;
    padding: 0
}
.first {
    font-weight: bold
}
.outer ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 18px
}

<强> HTML：

<div id="footer">
    <ul class="outer">
        <li class="first"><a href="#">Top Item 1</a></li>
        <li>
            <ul>
                <li><a href="#">sub item 1</a></li>
                <li><a href="#">sub item 2</a></li>
                <li>
                    <ul>
                        <li><a href="#">sub item 1</a></li>
                        <li><a href="#">sub item 2</a></li>
                    </ul>
                </li>
                <li><a href="#">sub item 5</a></li>
            </ul>
        </li>
    </ul>

    <ul class="outer">
        <li class="first"><a href="#">Top Item 2</a></li>
        <li>
            <ul>
                <li><a href="#">sub item 1</a></li>
                <li><a href="#">sub item 2</a></li>
                <li><a href="#">sub item 3</a></li>
                <li><a href="#">sub item 4</a></li>
                <li><a href="#">sub item 5</a></li>
            </ul>
        </li>
    </ul>

    <ul class="outer">
        <li class="first"><a href="#">Top Item 3</a></li>
        <li>
            <ul>
                <li><a href="#">sub item 1</a></li>
                <li><a href="#">sub item 2</a></li>
                <li><a href="#">sub item 3</a></li>
                <li><a href="#">sub item 4</a></li>
                <li><a href="#">sub item 5</a></li>
            </ul>
        </li>
    </ul>

</div>

Answer 2

或者，如果你想要一些纯粹的CSS，那么这样的事情怎么样： http://jsfiddle.net/pLFqd/2/

编辑错过了一些关于不想悬停功能的内容，请尝试附加简单示例

Answer 3

这里有一个复制粘贴的东西：

<html>
<head>
<style>
    li.level1 { float: left; display: inline; margin-right: 20px }
    ul.level2 { display: inline }
    li.level2 { display: block; padding-left: 20px }
    ul.level3 { display: inline }
    li.level3 { display: block; padding-left: 20px }
</style>
</head>
<body>
<ul class="level1">
    <li class="level1">apple</li>
    <li class="level1">banana
        <ul class="level2">
            <li class="level2">banana 1
                <ul class="level3">
                    <li class="level3">banana 1 A</li>
                    <li class="level3">banana 1 B</li>
                </ul>
            </li>
            <li class="level2">banana 2</li>
        </ul>
    </li>
    <li class="level1">cherry
        <ul class="level2">
            <li class="level2">cherry 1</li>
            <li class="level2">cherry 2</li>
        </ul>
    </li>
    <li class="level1">dddd</li>
</ul>
</body>
</html>

三级CSS菜单，第一层为水平布局

3 个答案: