How to display an HTML list non-nested?

Question

Here's the HMTL

<ul>
    <li>Salads</li>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Prunes</li>
        </ul>
    </li>
    <li>Main Course</li>
</ul>

Here's what it looks like now:

Salads Fruits
   Apples Prunes
Main Course

And here's what I'd like it to look like:

Salads Fruits Main Course
Apples Prunes

How can I achieve this, without modifying the HTML?

Current CSS:

ul {
    list-style:none;   
    display:block;
}
li {
    display:inline-block;
}

Answer 1

you will need to apply styles to the ULs INSIDE the lis. Try this out

ul li    {
    float: left;        
}

Answer 2

You should style the ul inside the li, and the li inside the ul,

View demo here. I hope it helps.

CSS for a quick look:

ul {
    list-style:none;   
    display:block;
    float: left;
    clear: both;
    width: 100%;
}
li {
    display: inline;
}
ul > li > ul {
    padding-left: 0;
}

Answer 3

This results in the display:

Salads Fruits Main Course
      Apples Prunes

Here is the CSS I used.

ul {
    list-style:none;   
    display:block;
    float: left;
    clear: both;
    width: 100%;
}

li {
    display: inline;
}

If you don't want the individual fruits to start a little way across the page - remove the padding with this style rule:

ul > li > ul {
    padding-left: 0;
}

All of the above will still work if you nest more items too. For example:

<ul>
    <li>Salads
        <ul>
            <li>Green Leaf</li>
            <li>Chicken</li>
        </ul>
    </li>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Prunes</li>
        </ul>
    </li>
    <li>Main Course</li>
</ul>