show the block form when the mouse hover on the toplink div
<p>the mouse will hover on block html:</p>

<pre><code>&lt;div class="toplinks"&gt;...&lt;/div&gt;
</code></pre>

<p>the show block content html:</p>

<pre><code>&lt;div id="pop-login" style:"display:none;"&gt;...some content and a form&lt;/div&gt;
</code></pre>

<p>my jquery code:</p>

<pre><code>$('.toplinks').hover(function(){

    $('#pop-login').toggle();
    $('#pop-login').toggleClass("hpposition");
});     
</code></pre>

<p>the css:</p>

<pre><code>.hpposition{
    position: absolute;
    top: 30px;
    left:500px;
    z-index: 10000;
}
</code></pre>

<p>now, there comes a problem, when the mouse move out the <code>toplinks</code>div. i can't fill something to the showing form. when the mouse moves out the   <code>toplinks</code> div. the form disappear immediately. how to make that the use can fill some content to the form?</p>
