<ul> within another <ul> inherits style

JamWaffles

I have the following structure in some HTML:

<ul class="li_inline">
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
</ul>

With the CSS like this:

.li_inline li
{
    display: inline;
}

.li_block li
{
    display: block;
}

What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).

Can someone suggest some CSS I can use so that the inner (li_block) lists’ <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?

Thanks,

James