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

作为替代尝试使用鼠标悬停和鼠标但有同样的问题。任何人都可以建议如何改进此代码？提前谢谢

Answer 1

您需要定位occasion_title而不是occ才能达到您的要求。

只需更改此行：

$(".occ").hover

到这一个：

$(".occasion_title").hover

一个有效的小提琴链接：http://jsfiddle.net/dN3Tr/2/

Answer 2

如果你没有放弃jQuery，你可以使用CSS来做到这一点：

.occasion_title:hover .occasions {
    display: inline;
}

Jquery Drop Down Box问题

2 个答案: