如何列出列表，顶级li是内联的，低级列表是普通列表？

Question

嘿所以我有一个列表，其中一些项目包含其他列表。第一级列表需要内联，但任何级别列表都应该是正常的列表项。如果我告诉你它会更好。这就是我所拥有的：

但是，我希望Home Profile Groups事件和频率都在一条直线上，其下面有任何子列表。这是CSS：

#box1, #box2, #box3 {
    background-color: #FC9;
    padding:10px;
    text-align:center;
}

#box1 li, #box2 li, #box3 li {
    display:inline;
    font-size:24px;
    list-style:none;
}
#box1 li ul, #box2 li ul, #box3 li ul {
    display:list-item;
    list-style:none;
}
#box1 li ul li {
    display:list-item;
    font-size:18px;
    list-style:none;
    border:none;
}
#box1 li ul li ul {
    display:list-item;
    list-style:none;
}
#box1 li ul li ul li {
    font-size:12px;
    list-style:none;
    border:none;
}

#box2 {
    background-color:#6F9;
}

#box3 {
    background-color:#C9F;
}

这是HTML：

<div id="box1">
    <ul>
        <li>Home</li>
        <li>Profile
            <ul>
                <li>Edit Profile</li>
                <li>Inbox
                    <ul>
                        <li>New Message</li>
                        <li>Sent</li>
                    </ul>
                </li>
                <li>Photos</li>
                <li>Buddies</li>
            </ul>
        </li>
        <li>Groups
            <ul>
                <li>Create Group</li>
            </ul>
        </li>
        <li>Events
            <ul>
                <li>Plan Event</li>
            </ul>
        </li>
        <li>Frequencies</li>
    </ul>
</div>

<div id="box2">
    <ul>
        <li>Sitemap</li>
        <li>Help</li>
    </ul>
</div>

<div id="box3">
    <ul>
        <li>Private Policy</li>
        <li>Code of Conduct</li>
        <li>Terms of Use</li>
    </ul>
</div>

感谢您提供任何帮助。

Answer 1

尝试浮动最外面的li：

#box1 li, #box2 li, #box3 li {
    display:inline;
    font-size:24px;
    list-style:none;
    float: left;       /* float the outer ones so they line up next to each other */
}
/* snip */
#box1 li ul li {
    display:list-item;
    font-size:18px;
    list-style:none;
    border:none;
    float: none;       /* don't float the inner ones */
}

您需要将clear: both添加到#box2以便排队。