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

Question

我提供了一个jsfiddle。问题是，当我将鼠标悬停在“产品”上时，它只显示“起重机”，“人体工程学提升”和“坠落保护”，并且只有当我将鼠标悬停在THAT上时才显示下面的信息，直到嵌套的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;
}