Question

我有this code here，我正在尝试在.submenu悬停事件中显示嵌套的ul#menu li列表。如果您可以看到ul.submenu位于li内，但出于某种原因，当您将鼠标从实际ul#menu li a拖动到其嵌套ul.submenu时，它会消失，就好像你要离开它一样。我不明白为什么会这样。

我尝试过更改DOM以及使用setTimeout，但没有运气。

有关如何完成此操作的任何想法？更重要的是......为什么我的问题发生了？我的意思是，由于ul.submenu 里面，li不应该被视为相同的悬停区域？

Answer 1

常见问题。父菜单项和.submenu之间的空格是罪魁祸首。

一个简单的解决方法是将.submenu包裹在div中，其宽度足以充当菜单项和子菜单之间的桥梁。

请参阅此处 - http://jsfiddle.net/BuJav/15/

CSS更改 -

.submenu-wrapper {
    position: absolute;
    min-width: 160px;
    min-height: 36px;
    top: -4px;
    left: 160px;
}
.submenu {
    position: relative;
    min-width: 160px;
    min-height: 36px;
    top: 0;
    left: 10px;
    background: url('../images/gradient_menuarea.png') repeat-x;
}

JS更改 -

$(function(){
    $('#menu > li, .submenu > li').hover(
        function(){
            var submenu = $(this).find('ul.submenu');
            if (submenu.hasClass('submenu')){
                submenu.removeClass('hide');
            }
        },
        function(){
            var submenu = $(this).find('ul.submenu');
            if (submenu.hasClass('submenu')){
                submenu.addClass('hide');
            }
    });
});

正确地定位了子菜单ul。

请注意，您可以使用此css消除JS

.submenu {display:none;}
#menu-area ul li:hover .submenu {display:block}

您不需要在子菜单上.hide课程

http://jsfiddle.net/BuJav/16/

Answer 2

试试这个：http://jsfiddle.net/UFevL/6/

HTML

<div id="menu">
    <ul>
        <li class="active">
            <a href="?l=EL&amp;m=932K59EciV">Menu #1</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=M-z-3crmAP">Menu #2</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=jpHiTwH1bT">Menu #3</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=Jwr0SIWoWX">Menu #4</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=QY8SgMl5JH">Menu #4</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=8GaCmPByu3">Menu #5</a>
        </li>
        <li>
            <ul>
                <li>
                    <a href="?l=EL&amp;m=ueHp2vYKUa">Submenu #1</a>
                </li>
                <li>
                    <a href="?l=EL&amp;m=HQvyKxum8q">Submenu #2</a>
                </li>
                <li>
                    <a href="?l=EL&amp;m=81cDaTOCsL">Submenu #3</a>
                </li>
            </ul>
            <a href="?l=EL&amp;m=BQMppfQ0Dl">Menu #6</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=D3wTd4F5Mn">Menu #7</a>
        </li>
    </ul>
</div>

CSS

#menu ul {
    width: 160px;
    padding: 4px;
    margin: 0;
    border: 2px solid #94AA13;
    background-color: #fff;
    border-radius: 4px;
}

#menu li {
    position: relative;
    padding: 0;
    margin: 0;
}

#menu li + li {
    margin-top: 4px;
}

#menu a {
    display: block;
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    color: #f2f2f2;
    background-color: #283720;
    border-radius: 4px;
}

#menu li > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin: -4px 0 0 10px;
}

#menu li:hover > ul {
    display: block;
}

#menu li:hover > ul:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
}

JS ......没有！

诀窍在：before元素：http://caniuse.com/#search=before

如果您无法使用它，请尝试添加虚拟div。

Answer 3

我不知道您当前的项目是否可以接受，但您可以快速修复：

menu-area ul li a{
   width: 100%;
   color: #F2F2F2;
   display: block;
   padding-right:10%;
}

您可以将值更改为您想要的任何可以修复您需求的百分比。只要做到足以确保满足子菜单区域。我没有费心去检查确切的值。让我知道它是否有效！

jQuery ul li悬停效果

3 个答案: