Listas desordenadas anidadas y Display

[caneva]

Tengo dos listas desordenadas (llamemosles sublistas), anidadas dentro de otra lista, también desordenada (llamemosle lista principal). El tema es que quiero que las sublistas se muestren como una lista normal, pero a su vez que la lista principal que las contiene haga que se muestren las sublistas como columnas dentro de ella misma.

El código es el siguiente:

Código:

<div id="listas">
<p>Bla,bla,bla,bla</p>
<ul> <!-- Lista principal -->    
    <li>
        <h1>Lista 1:</h1>
        <ul> <!-- Lista secundaria 1 -->
            <li>Elemento 1.1</li>
            <li>Elemento 1.2</li>
        </ul>
    </li>
    <li>
        <h1>Lista 2:</h1>
        <ul> <!-- Lista secundaria 2-->
            <li>Elemento 2.1</li>
            <li>Elemento 2.2</li>
        </ul>
    </li>
</ul>
</div>

#listas p
{
margin: 0px;
border: 0px;
padding: 15px;
text-indent: 25px;
background: #CCCCCC;
}

#listas ul li h1
{
padding: 8px 8px 8px 10px;
margin: 0px;
border: 0px;
font: 18px Verdana, "Trebuchet MS", Arial, sans-serif;
background: #999999;
}

#listas ul
{
margin: 0px;
border: 0px;
padding: 15px;
}

#listas ul li /*Esto se supone que hace que la lista se vea en dos columnas*/
{
display: inline;
}

#listas ul li ul li
{
display: list-item; /*Esto se supone que hace que las dos sublistas se vean como una lista normal*/
list-style-type: square;
margin: 0px 0px 0px 20px;
border: 0px;
padding: 0px;
}

Aprobechando el post me gustaría preguntar si #listas ul li h1 {} es equivalente a #listas h1 {} en mi caso, porque he probado y el resultado es el mismo, aunque supongo que la primera es más correcta que la segunda ¿no?:

Gracias por su tiempo.