Menú desplegable cortado

[mmar]

Hola a todos!! Me he pasado horas leyendo el foro para ver si lograba por mi cuenta solucionar el tema, pero no he podido.
Estoy "diseñando" un blog con un menú desplegable, pero no logro hacer que no se corte.
Tomé el CSS de una de las webs generadoras de menúes, lo modifiqué levemente en temas de colores y le saqué el bordecito que tenía y cosas menores que fui probando ya que no sé nada, quedando así:

El CSS

<style>
ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;}
ul#main-nav li {margin:0;padding:0;list-style:none;float:left;width:8em;border:0}
ul#main-nav li a {text-decoration:none;display:block;padding:0.3em 0.6em;color:white;background:url('http://img269.imageshack.us/img269/3301/56341350.png');border-left:2px solid #c70000}
ul#main-nav li a:hover, ul#main-nav li a:focus {background:url('http://img269.imageshack.us/img269/3301/56341350.png');border-left:2px solid #FF0000; outline:0px;}
ul#main-nav li ul {padding:0;margin:0;display:none; border:0;}
ul#main-nav li:hover ul {display:block;}
ul#main-nav li ul li {float:none; border:0;}
ul#main-nav li ul li a {font-size:0.9em;}
</style>

El HTML

<ul id="main-nav">
<li><a href="http://1demayorrtt.blogspot.com/">Inicio</a></li>
<li><a href="http://1demayorrtt.blogspot.com/search/label/Declaraciones">Declaraciones</a></li>
<li><a href="http://1demayorrtt.blogspot.com/search/label/La%20Junta">La Junta</a>
<ul>
<li><a href="http://1demayorrtt.blogspot.com/search/label/La%20Junta">Qué está pasando?</a></li>
<li><a href="http://1demayorrtt.blogspot.com/search/label/Nuestros%20Proyectos">Nuestros proyectos</a></li>
</ul>
</li>
<li><a href="http://1demayorrtt.blogspot.com/search/label/Mov%20Obrero">Mov Obrero</a>
<ul>
<li><a href="http://1demayorrtt.blogspot.com/search/label/Mov%20Obrero">Situación general</a></li>
<li><a href="http://1demayorrtt.blogspot.com/search/label/Paritarias">Paritarias</a></li>
<li><a href="http://1demayorrtt.blogspot.com/search/label/Libertad%20sindical">Libertad sindical</a></li>
<li><a href="http://1demayorrtt.blogspot.com/search/label/Debates">Debates</a></li>
</ul>
</li>
<li><a href="http://1demayorrtt.blogspot.com/">Boletines</a>
<ul>
<li><a href="http://1demayorrtt.blogspot.com/search/label/Bolet%C3%ADn%202009">Elecciones 2009</a></li>
</ul>
</li>
</ul>

Y acá la página para que puedan ver http://1demayorrtt.blogspot.com/

Probé jugando con z-index, con display: block y otras alternativas que para problemas similares han indicado uds, pero aunque es probable que la solución venga por ese lado, no logro encontrarle la vuelta.

Podrían por favor ayudarme?
Muchas gracias de antemano!!

[mmar]

No lo solucioné, opté por poner un menú vertical con varias de las opciones que tenía el otro organizadas en submenúes. Quedó bastante bien igual.
Aclaro para que nadie que lo vea se rompa el coco sin necesidad, si corresponde a cómo se manejan y lo prefieren, pueden cerrar el tema.