JQuery Hover Menu 只显示一些信息，但不是全部？

Question

我提供了一个 jsfiddle。问题是，当我将鼠标悬停在“产品”上时，它只显示“起重机”、“人体工程学提升”和“坠落保护”，只有当我将鼠标悬停在“产品”上时，它才会显示下方的信息，直到嵌套的 ul 停止。当我将鼠标悬停在“产品”上时，我希望立即显示产品、起重机等下的所有内容。可能是我的类名和 ID 名，因为它们都是一样的，如果是，请告诉我。

http://jsfiddle.net/miiicheellee/QTm2c/18/

HTML 太长，无法放在这里，但它在 jsfiddle 中。

CSS：

.red ul {

list-style-type: none;

/* takes bullets off of Products, Solutions Center, etc. */

}

.red li ul {

position: absolute;

/* rest of navigation doesn't move on dropdown */

}

.red ul.mega-menu {

position: relative;

width: 100%;

}

.red ul.mega-menu li {

float: left;

font-size: 16px;

font-weight: bold;

margin: 0;

padding: 0;

}

.sub-container {

display: none;

}

还有 JQuery：

$(document).ready(function () {
$("li.dc-mega-li").hover(function () {
    $(this).children("div.sub-container").toggle();

});
});

Answer 1

CSS 唯一的解决方法是添加如下内容：

.dc-mega-li:hover ul ul {
    display: block;
}

将在父 li 悬停时显示所有列表。

/* 编辑 */

FIDDLE

} 我将删除 .sub-container 的规则并隐藏/显示 ul 列表：

/* .sub-container {
    display: none;
} */

.dc-mega-li ul  {
    display:none;
}

.dc-mega-li:hover ul {
    display: block;
}