Position element near another one, always on the visible portion of page

Question

Hello,

I have always the same problem with displaying simple dialog boxes. The markup is as follows:

<li class="clickable">element
    <ul class="options">
         <li><a href="#">Option 1 with long name</a></li>
         <li><a href="#">Option 2 with long name</a></li>
         <!-- ... more similar options -->
    </ul>
</li>

$('ul.options').hide();
$('li.clickable').click(function(){$(this).find('.options').toggle()});

The problem is, that when the .options are visible and positioned absolutely, relatively to .clickable, sometimes the box is partially off the visible page area.

Is there any model solution of this problem?

If I had to do this manually, I'd check size of the browser area, size of the .options, size of the .clickable and then position it checking if it fits on screen and do not cover the .clickable.

Any other lightweight solution?

In other words, how to calculate the best position (closest to .clickable, but always visible) for the options box?