2

我在这里有这段代码，我试图在悬停事件上显示嵌套.submenu列表。ul#menu li如果您可以看到ul.submenu's 在 's 内，li但由于某种原因，当您将鼠标从实际拖动ul#menu li a到其嵌套ul.submenu时，它会消失，就好像您要移出它一样。我不明白为什么会这样。

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

关于如何完成这项工作的任何想法？更重要的是……为什么会出现我的问题？我的意思是，既然在里面ul.submenu，它不应该被认为是同一个悬停区域吗？li

4

3 回答 3

2

常见问题。父菜单项和之间的空间.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/

于 2013-02-25T15:38:29.240 回答
0

试试这个：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。

于 2013-02-25T14:36:26.827 回答
0

我不知道它在您当前的项目中是否被认为是可以接受的，但您可以做一个快速修复：

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

您可以将值更改为您想要的任何 % 以解决您的需求。只要做到这一点，以确保满足子菜单区域。我没有费心检查确切的值。让我知道它是否有效！

于 2013-02-25T14:55:40.390 回答