Jquery & CSS drop down menu: the third level that 'over-passes' the window edge

I have problem with the third level of a drop down menu, which ‘over-passes’ the right edge of the document window when you hover it’s parent, you have a look here to see what I mean, if you hover ‘Accounts’ -> ‘Manage’,


I want that third level to ‘float’ to its parent’s left when it ‘auto-detects’ there is the end of the edge of window, so the layout would be something like this,


I changed the position of that third level by putting a class manually, then adjust its left position to left:-102%; in the css.

In a practical situation, I won’t be able to put that class in manually, so I think I have to use Jquery to help me to ‘auto-detects’ and then add that specific class to adjust the position.

Is it possible? Any ideas and hints please?