CSS menu string don't break for second line

I have a CSS menu.

The problem is that in a ul li a span when I have a long string it doesn't break for the second line, it just continues on one line getting out of the menu.

Here's my CSS code if you want to take a look at it.

What is the problem here? (i have made a simple menu where i开发者_如何学JAVAt works, but in this case, of a dropdown menu - it doesn't)

here's the link http://jsfiddle.net/mr_mikey/nR2t6/

Remove the following style from your CSS:

#mainmenu ul ul a {
    white-space: nowrap;
}

Could it be that you're using inline span tags instead of block-level div tags? Haven't tried myself but this could have an effect on the way overflow and wrapping is handled. There's also a CSS3 property called "word-wrap" that you could try setting to "break-word".