Question

在我的代码中，当我尝试悬停主菜单时，子菜单应该打开，我也可以点击子菜单的其他链接。我几乎做了所有事情，但除了当我试图悬停子菜单时它是没有显示。

我将鼠标悬停在菜单上，我可以看到子菜单，但当我尝试进入子菜单时，它会消失

 $(document).ready(function(){

        $(".accounts").mouseenter(function() {
            $(".underdrop").slideDown();
        });
        $(".accounts").mouseleave(function() {
            $(".underdrop").slideUp();
        });

 }); 




.accounts{

display: inline-block;

position: relative;
}
.underdrop{
    width: 150px;
    position: absolute;
    background-color: #fff;
    margin-top: 20px;
    margin-left:250px;
    border: 1px solid #d7d7d7;
    padding-left: 0px;
    height:230px;
    z-index: 999999;
    -webkit-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75);
    display:none;

}

.underdrop::before{
    content: '';
    position: absolute;
    border: 15px solid #4b968a;
    border-bottom-color: transparent;
    border-right-color: transparent;
    margin-left: 55px;
    transform: rotate(45deg );
    margin-top: -15.5px;
    z-index: 9999
}

DEMO

Answer 1

像这样更新您的document.ready功能。我已经检查了jsfiddle

    $(document).ready(function(){

        $(".accounts").mouseenter(function() {
            $(".underdrop").slideDown();
        });
        $(".underdrop").mouseleave(function() {
            $(".underdrop").slideUp();
        });

 });

检查更新的jsfiddle here

在悬停时，子菜单未按预期停留

1 个答案: