Problema con listas anidadas

[Bio]

Hola, tengo un pequeño problema con las listas anidadas, para variar solo en IE por que en FF y Opera se ve bien.

La situación esta asi:

Quiero hacer un menu con listas, el HTML es el siguiente:

Código HTML:

<ul id="lista1">
<li id="elemento1">...<li>
<li id="elemento2">
  <ul id="lista2">
    ...
  </ul>
</li>
</ul> 

El problema esta en que "elemento2" es de tamaño definido y más pequeño que la segunda lista que contiene. Internet Explorer envuelve la segunda lista automaticamente aumentando el tamano de "elemento2" y esto rompe la posición de otros elementos cercanos. El CSS esta así:

Código:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul li {
	float: left;
	display: inline;
	margin: 0 0 0 30px;
	padding: 0;
}

#elemento2 {
	width: 11px;
	height: 11px;
	display: block;
}

#elemento2 ul {
	width: 200px;
	height: 113px;
	position: relative;
	top: -110px;
	left: 30px;
}

Lo que necesito es que "elemento2" quede con el tamaño fijo de 11 x 11 y "lista2" no quede dentro de los bordes haciendo que se agrande.

De antemano, Gracias!
Saludos

[Bio]

Bueno, parece que no hay respuestas asi que ahi va como lo resolví. Despues de estar revisando y probando varias soluciones, encontre que usando overflow: hidden en el elemento de lista, la lista interna se sale del flujo de la página que es lo que quería. Solo hay que agregar el clásico hack para que solo lo vea Internet Explorer y listo.