Jquery - Coalition body border detection

i have a problem with a draggable Menu.

Example http://jsfiddle.net/55VJG/

It works finde but when i drag it to right:0px; or buttom:0px; my Menu is out of the browser. How would you resolve this problem? Is it maybe possible to fix this only with css?

HTML

<div id="bar">
    Open
    <div id="menu"> Bookmarks <br /> Misc <br /> Some Stuff </div>  
</开发者_运维知识库div>

CSS

body { overflow:hidden; }
#bar { width: 100px; border: 1px solid #000; background-color:#ccc; top:0px; left:0px; position:fixed; }
#menu { display:none; border: 1px solid #f00; width:200px; height:200px; background-color:#555; }

JS

$(document).ready(function()
{
   $('#bar').draggable();         

   $("#bar").hover( 
    function () { $('#menu').show(); },
    function () { $('#menu').hide(); });

});

You have to use the option containment: 'document' for it to not go outside the boundaries of your page. Also, the width of the element which triggers the menu should be the same with the width of your menu.

Here is a forked demo of yours.