当选择下拉菜单时，div失去焦点

Question

我使用jQuery来显示/隐藏一个效果很好的菜单，除非用户选择一个选择框。当它们悬停在选择列表上时，它会触发我的mouseleave事件。有没有人有任何想法我怎么解决这个问题？

这是我的Javascript：

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('li.special').mouseenter(function(){

         jQuery('div.giftreg').fadeIn(100);
         return false;
    });

    jQuery('div.giftreg').mouseleave(function(){

         jQuery('div.giftreg').fadeOut(100);
         return false;
    });
});
</script>

这是HTML：

<div class="giftreg regdropdown" style="left: 749px;display:none">
    <form action="/giftregistry/search/results/" method="post">
        <input type="hidden" value="TOxAyeFLEBRtKvpk" name="form_key" />
        <input type="hidden" name="params[search]" value="type" />
        <input type="hidden" value="2" name="params[type_id]" />
        <div class="giftfname">
            <input type="text" autocomplete="off" onclick="this.value=''" value="First Name" name="params[firstname]">
        </div>
        <div class="giftlname">
            <input type="text" autocomplete="off" onclick="this.value=''" value="Last Name" name="params[lastname]">
        </div>
        <div class="giftsubmit">
            <input type="image" src="/images/giftregistry/regbutton.png">
        </div>
    </form>
    <div class="gift2create">
        <select class="regoptions2">
            <option>Baby Registry</option>
        </select>
    </div>
    <div class="giftbutton2">
        <form action="/giftregistry/index/edit/" method="post">
            <input type="hidden" value="TOxAyeFLEBRtKvpk" name="form_key" />
            <input type="hidden" value="2" name="type_id" />
            <input type="image" border="0" src="/images/giftregistry/regbutton.png" />
        </form>
    </div>
    <div class="giftbutton3">
        <a href="/giftregistry/">
            <img border="0" src="/images/giftregistry/regbutton.png" />
        </a>
    </div>

    <a href="/baby-registry">
        <img border="0" src="/images/giftregistry/dropdown.png" />
    </a>
</div>