Detecting is Div Out Of Screen

Question

I coded dropdown menu via javascript(w/ jQuery) and CSS. Dropdown menu works fine but if dropdown menu located at corner for example rightmost or leftmost of user screen then if user opens the dropdown menu, it overflows to unseen area of window and causes horizontal scroll-bar.

How can I stop overflowing ?

HTML

<ul class="dropdown">
    <li class="headlink">
        <a href="javascript://">Menu</a> <img src="/static/images/mini/sort_down.png" />

        <ul class="arrowlist invisible">
            <li>Hello 1</li>
            <li>Hello 2</li>
            <li>Hello 3</li>
        </ul>
    </li>
</ul>

CSS

.dropdown {z-index: 1}
.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;}
.dropdown li{}
.dropdown a{outline:none}
.dropdown ul{z-index:100;border:1px solid #C7C9CF;-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;behavior: url(/static/css3pie.php);background: #FFF url("/static/images/grey_fade_back.png") repeat-x scroll bottom;padding:8px;position:absolute;top:-1px;left:-4px}
.dropdown ul li{margin:2px;white-space:nowrap}

JS

$('.dropdown li.headlink')
    .click(function() {
        $(this).css('position', 'relative');
        $('ul', this).slideDown(100);
    });

        $('.dropdown li.headlink')
    .mouseleave(function(){
        var headlink = this;
        $('ul', this).slideUp(100, function(){
            $(headlink).css('position', 'static');
        })
    });

Answer 1

I found a solution:

$('.dropdown li.headlink')
    .click(function() {
        $(this).css('position', 'relative');

        if($('ul', this).width() + 10 > $(window).width() - $(this).offset().left) $('ul', this).css('left', 'auto').css('right', '-1px');
        else $('ul', this).css('left', '-4px').css('right', 'auto');

        $('ul', this).slideDown(80);
    });