Showing on mouseover a div created dynamically and remove
<p>I searched a lot through questions but I did not find the right way. My problem is: I want to create a <code>div</code> dynamically , showing it on <code>mouseover</code> appending it to another <code>div</code>, and remove (through <code>remove()</code> function) on <code>mouseout</code>. I tried couple ways but in any of them , sometimes the <code>div</code> shows up and then disappear, sometimes it doesnt, sometimes it disappear when my mouse goes away from the text in the container <code>div</code>.
Thank you guys .</p>

<h3>This is my code</h3>

<pre><code>    var usr = 'username_pre';

var newdiv = $('&lt;div&gt;', { 
              html: '&lt;a href="#" title=""&gt;'+usr+'&lt;/a&gt; &lt;/br&gt; &lt;a href="#" title=""&gt;impostazioni&lt;/a&gt; &lt;/br&gt; &lt;a href="#" title=""&gt;esci&lt;/a&gt;'
              });


$("#container").mouseover(function(){
        $("#options").css('visibility','visible').append(newdiv);
    }); 
$("#options").mouseout(function(){
         $(newdiv).remove();
});
</code></pre>
