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.

[caneva]

Para cumplimentar la información el código anterior se muestra así en el navegador:


Cuando el objetivo es que se vea así:

Sin usar float claro, he aquí el problema con las listas desordenadas anidadas y la propiedad display.

[caneva]

Por más vueltas que le doy no se que estoy haciendo mal, o hay algún error sintáctico, o bien conceptual, o bien simplemente que lo que pretendo hacer es inviable del todo. Agradecería que alguien me dijera si es posible al menos y a partir de ahí ya intentaré buscarme la vida; me gustaría saber que el tunel tiene salida antes de meterme de lleno.

[thunder.scripts]

¿No querés usar float por algún motivo en particular?
Porque con un mínimo cambio a tu hoja de estilos podrías lograr el efecto que buscás:

Código:

#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 0;
}

#listas ul li /*Esto se supone que hace que la lista se vea en dos columnas*/
{
	list-style-type: none;
	float: left;
	margin-left: 15px;
}

#listas ul li ul li
{
	display: list-item; /*Esto se supone que hace que las dos sublistas se vean como una lista normal*/
	float: none;

}

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>

Suerte
Fede

[epoj]

Quizas te pueda ayudar leer como se manejan aqui las listas, tambien:
http://somerandomdude.net/projects/webdev/divless/

Saludos! Damian.