ciao,

ho un problema con un menu di navigazione orizzontale.
In pratica, se il nome della voce del sub menu è più lungo della larghezza del contenitore, mi va sì a capo, però mi mantiene il line-height del contenitore accavallando quindi la parola alla voce di menu sotto

CSS:

codice:
#menu {list-style-type:none; padding:0; margin:0;} 
#menu ul {list-style-type:none; padding:0; margin:0;} 
#menu li {float:left; background:#eee; margin:0; border-right:1px solid #ddd; width:125px; height:30px; z-index:41;} 
#menu li .sub {background:#eee; } 
#menu li .sub a{height:40px; line-height:40px;} 
#menu li a {display:block; color:#162a83; font-weight:bold; height:40px; line-height:40px; font-family: "Trebuchet MS", verdana, Helvetica, sans-serif, arial; font-size:12px; width:125px; text-decoration:none; text-align:center;} 
#menu :hover {color:#fff; background:#fff url(../immagini/sfondo_hover1.gif); position:relative;} 
#menu :hover > a {color:#fff; background:blue; } 
#menu ul, #menu :hover ul ul, #menu :hover ul :hover ul ul, #menu :hover ul :hover ul ul.left {visibility:hidden; width:0; height:0; overflow:hidden;} 
#menu :hover ul {visibility:visible; overflow:visible; position:absolute; height:auto; width:119px; left:0px;top:26px; background:url(transparent.gif);} 
#menu :hover ul :hover ul, #menu :hover ul :hover ul :hover ul {visibility:visible; overflow:visible; height:auto; width:119px; padding:9px 3px; left:100px; top:0;} 
#menu :hover ul :hover ul.left, #menu :hover ul :hover ul :hover ul.left {visibility:visible; overflow:visible; height:auto; width:119px; padding:9px 3px; left:-106px; top:0;}
HTML:

<ul id="menu">[*]HOME[*]CATEGORIA
<ul>
<li class="sub">sub voce1</a>
<li class="sub">sub voce1 lunga</a>[/list]
[/list]

come posso risolvere?

grazie