jquery - 隠し要素内のJquery Dropkickが正しく表示されない

Question

非表示要素内でドロップキックを使用すると問題が発生します。

ここでデモをモックアップしました：http://jsfiddle.net/C6NuL/

HTML

<p>It should look similar to this</p>
<div>
    <select class="dropkick">
        <option>Option&nbsp;One</option>
        <option>Option&nbsp;Two</option>
        <option>Option&nbsp;Three</option>
        <option>Option&nbsp;Four</option>
        <option>Option&nbsp;Five</option>
    </select>
</div>
<div style="clear:both;">
<a href="#" onclick="$('#selectDiv').slideDown(500);return false;">click me</a> 
</div>
<div id="selectDiv" style="display:none;">
    <p>But it ends up looking like this</p>
    <select class="dropkick">
        <option>Option&nbsp;One</option>
        <option>Option&nbsp;Two</option>
        <option>Option&nbsp;Three</option>
        <option>Option&nbsp;Four</option>
        <option>Option&nbsp;Five</option>
    </select>
</div>

JQuery

$(document).ready(function(){
    $('.dropkick').dropkick();
});

問題は、隠し要素内の選択リストでドロップキックを使用すると、その隠し要素を表示すると正しく表示されないことです。

何が起こっているのか、またはこの問題をどのように修正できるのかを誰か説明できますか?

隠し要素に幅がないことに関係があると確信していますが、それを修正する方法がわかりません。

どんな助けも素晴らしいでしょう。