Jquery下拉框问题

Question

我目前在使用 Jquery 和 .hover 选项实现下拉菜单时遇到问题。

问题是，即使您将鼠标悬停在元素上，它有时也会消失。

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;
}

我尝试使用 mouseover 和 mouseleave 作为替代方案，但遇到了同样的问题。谁能建议如何改进这段代码？预先感谢您

Answer 1

您需要定位 occasion_title 而不是 occ 才能实现您的要求。

只需更改此行:

$(".occ").hover

对于这个:

$(".occasion_title").hover

一个有效的 fiddle 链接:http://jsfiddle.net/dN3Tr/2/