jquery - Jqueryドロップダウンボックスの問題

Question

現在、.hover オプションを使用して Jquery を使用してドロップダウン メニューを実装する際に問題が発生しています。

問題は、要素の上にカーソルを置いても時々消えることです。

JSFiddle はhttp://jsfiddle.net/liamsorsby/dN3Tr/です。

ただし、ここでコードを表示したい場合は、以下のとおりです。

html

<div class="header_links">
        <ul>
            <li class="occasion_title occ">OCCASION
                <div class="occasions occ">
                    <ul class="occ">
                        <li><p>test</p></li>
                        <li><p>test</p></li>
                        <li><p>test</p></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>

JQuery

$(".occ").hover(
    function(){
        $(".occasions").css("display","inline");
    },
    function(){
        $(".occasions").css("display","none");
    });

CSS

.header_links{
float:left;
margin-left:12px;
}
.header_links ul{
padding:0px;
margin:0px;
}
.header_links li{
border:1px solid #C09356;
float:left;
list-style-type:none;
width:125px;
font-family:Arial;
position:relative;
color:#000000;
height:35px;
background-color:none;
}
.occasions{
display:none;
position:absolute;
margin-top:23px;
margin-left:-96px;
z-index:3000;
}
.occasions li{
border:1px solid #C09356;
height:25px;
width:110px;
background-color:#000000;
text-align:center;
}
.occasions p{
margin:3px 0 0 0;
padding:0px;
}

代わりに、マウスオーバーとマウスリーブを使用してみましたが、同じ問題がありました。このコードを改善する方法を提案できる人はいますか? 前もって感謝します