Question

我有一个菜单，某些项目中的菜单有子菜单。

我正在使用XHTML + CSS创建主菜单和子菜单，当用户将鼠标移到项目上时，我也使用native javascript来显示和隐藏子菜单有子菜单。

当鼠标移动到包含子菜单的项目时，会出现子菜单，但当将鼠标光标移动到子菜单时，子菜单会消失。

我想要的是，如果将鼠标光标放在主菜单中的项目或子菜单中的项目

上，则子菜单仍然可见

HTML

<div class="box">
<ul>
    <li class="havSub">Item 1
        <div>
            <ul>
                <li> <a href="#"> Sub 1 </a> </li>
                <li> <a href="#"> Sub 2 </a> </li>
            </ul>
        </div>
    </li>
    <li> <a href="#"> Item 2 </a> </li>
    <li> <a href="#"> Item 3 </a> </li>
    <li class="havSub">Item 4
        <div>
            <ul>
                <li> <a href="#"> Sub 1 </a> 
                </li>
                <li> <a href="#"> Sub 2 </a> 
                </li>
            </ul>
        </div>
    </li>
    <li> <a href="#"> Item 5 </a> 
    </li>
</ul>

CSS

.box{width:150px; border:2px solid #ccc; text-align:center; margin-top:50px;}
.box ul {padding:0; margin:0; list-style-type:none;}
.box ul li {margin-bottom:1px; display:block; padding:5px; background-color:#fff000; color:#ff0000; font:bold 20px arial; cursor:pointer;}
.box ul li:hover {background-color:#ffff00; color:#ff0000;}
.box ul li a {display:block; color:#ff0000; font:bold 20px arial; text-decoration:none;}
.box ul li div {position:relative; left:145px; top:-29px; display:none;}
.box ul li div ul {position:absolute;}

的Javascript

document.addEventListener('mouseover', function (event) {
    event = (event) ? event : window.event;
    if (event.target.className === 'havSub') {
        event.target.children.item(0).style.display = 'block';
        event.target.addEventListener("mouseout", function () {
            event.target.children.item(0).style.display = 'none';
        });
    }
});

您可以看到JSFiddle demo

Answer 1

您可以通过使用以下代码

轻松解决此问题，同时消除对jQuery的需求

.box ul li:hover * {
    display:block;
}

Demo

适用于任何支持CSS2的浏览器，因此IE7 +

Answer 2

如果您正在寻找更兼容的解决方案，即服务于IE6，这就是问题的核心：

子菜单上的链接会在主菜单的onmouseout事件中触发。您可以在DOM对象本身上放置一个标志，以安排延迟onmouseout。在子菜单上检测到onmouseover事件时，将取消计时器事件。关闭菜单的责任现在转发到子菜单。

$('main').onmouseout=function(){
    this.closing=setTimeout(function(){
        //close the menu here
    },300); //allow enough time to move on to the sub menu
}

$('sub').onmouseover=function(){
    //cancel the closing event
    if ($('main').closing) clearTimeout($('main').closing);

    this.onmouseout=function(){
      //close the menu here
    }
}

我希望子菜单在鼠标移动时保持打开状态

2 个答案: