the mouse will hover on block html:

Code:
<div class="toplinks">...</div>
the show block content html:

Code:
<div id="pop-login" style:"display:none;">...some content and a form</div>
my jquery code:

Code:
$('.toplinks').hover(function(){

    $('#pop-login').toggle();
    $('#pop-login').toggleClass("hpposition");
});
the css:

Code:
.hpposition{
    position: absolute;
    top: 30px;
    left:500px;
    z-index: 10000;
}
now, there comes a problem, when the mouse move out the toplinksdiv. i can't fill something to the showing form. when the mouse moves out the toplinks div. the form disappear immediately. how to make that the use can fill some content to the form?

http://miranda.gomoxy.net/test.jpg

although i have set the
HTML Code:
.hpposition z-index: 10000;.
but there are some content still above the showing form layer.