texto adapte al grosor del li

wenas wenas, tiempo sin pasar por aca... veran, mi problemita es el siguiente, tengo un menu desplegable que cuando la palabra sobrepasa el tamaño del ancho del li, esta sigue su curso y se sale del cuadro, necesito que al llegar al ancho del li salte de renglon y valla a uno nuevo.

se que seria mas facil colocar un grosor en el que pueda estar sin nungun problema todas las opciones del menu, pero algunas opciones del menu son exageradamente grandes (ajustan hasta 8 palabras) por lo tanto necesito que el texto se ajuste al grosor del li

aqui les dejo el codigo css

Código :

.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}

#nav {
   padding:0;
   margin:0;
   list-style:none;
   height:36px;
   position:relative;
   z-index:500;
   font-family:arial, verdana, sans-serif;
   margin-left: auto;
   margin-right: auto;
   width: 900px;
}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul, 
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:0px; border:1px solid #fffff; white-space:nowrap; width:115px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:auto; position:relative; float:left; width:115px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:115x; line-height:20px; text-indent:0px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(arrow.gif) 110px 7px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:110px; top:-4px; background: #fff; padding:0px; border:1px solid #3a93d2; white-space:nowrap; width:115px; z-index:400; height:auto;}

es un menu desplegable prediseñado, lo puden descargar de aqui:
http://www.stunicholls.com/menu/pro_dropdown_1.html

http://www.actualicese.com/ aqui hay un ejemplo de lo que pretendo lograr

Hola Neyle
A los "li" de segundo nivel o más (ul li ul li) deberías darle una anchura determinada y sin altura.
Quizás necesites también utilizar "white-space" para forzar las multilíneas.

Si puedes poner tu menú en un servidor sería más fácil ofrecerte una respuesta más precisa (ya que no adjuntaste el código html de ese menú)

Saludos