How to display the latest called object on top?
<p>I'm creating a custom select plugin. Everything is going great, but the dropdowns (<code>&lt;ul&gt;</code>-objects) are overlapping on each other :(</p>

<p>I understand, that the overlapping order is set after the elements order on page or when they are created. So my question is: <strong>What is the method to make the latest opened/shown object (<code>&lt;ul&gt;</code>) on top of the hierarchy?</strong></p>

<p>I just need the correct method. I'm not going to copy the full code, but a little example:</p>

<pre><code>$('#trigger').click(function () {
    new_dropdown.slideDown();
});
</code></pre>

<p><em>(A picture is worth of 1000 words)</em></p>

<p><img src="http://i.stack.imgur.com/QTWlz.png" alt="enter image description here"></p>

<p>So lets say, that I open the green select the last.. How can I make it on top of the yellow one?</p>

<p><strong>EDIT</strong></p>

<p>For easier testing I created jsfiddle. For future references I'll post the link: <strong><a href="http://jsfiddle.net/hobobne/uZV5p/1/" rel="nofollow">http://jsfiddle.net/hobobne/uZV5p/1/</a></strong> This is the live demo of the problem at hand.</p>
