How can I have a list of lists, with the top-level li's being inline, and the lower-level lists being normal lists?

Question

Hey so I have a list, with some of the items containing other lists. The first level of lists needs to be inline, but any list a level down should be normal list-item. It works better if I show you. This is what I have:

However, I want Home Profile Groups Events and Frequencies to all be in one straight line, with any child lists below them. Here is the 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;
}

and here is the 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>

Thanks for any help you can give.

Answer 1

Try floating the outermost lis:

#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 */
}

You'll need to add clear: both to #box2 to get things to line up, too.