菜单菜单三级子菜单格式答案

【问题标题】：Menu Menu level three sub menu formating菜单菜单三级子菜单格式
【发布时间】：2016-04-02 14:37:53
【问题描述】：

我曾经在 stackoverflow 社区成员的帮助下开发过这个菜单。老例子http://jsfiddle.net/5eecT/17/这个菜单被设计成只支持一级子菜单。现在需求发生了变化，我需要添加另一个将显示 3 级子菜单的级别。

我试图改变它，但它没有按设计工作。

我正在考虑两个选项，如下图所示

新示例http://jsfiddle.net/5eecT/22/

我可以添加 3 级菜单 Sub Sub Menu X，但我正在努力解决这些问题的格式问题。当前小提琴的选项一有两个问题

当我将鼠标悬停在 3 级菜单上时，Mega 菜单的主黑色背景会降低高度，我希望容器始终保持高度，无论我是悬停在 2 级菜单还是 3 级菜单上。
第二个问题是红色三角形也显示在 3 级菜单中，如下图红色圆圈所示。我需要在上面的父菜单下删除它和绿色 - Sub Sub Menu 1

我也在考虑按照方案二做（如图）

我会很感激这方面的帮助。我可以使用 div 做 3 级菜单，但我不确定这是否是个好主意。

感谢您提供这方面的任何帮助。

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

在这里解决>>>> submenu solved

现在您可以根据需要进行设计和调整！

添加了 CSS 规则 （我的代码的优点：不修改现有代码；只是添加了两个新的 css 规则以使其工作）

nav ul ul ul {
    display:none;
}

nav ul ul li:hover > ul {
    display:block;
    position:absolute;
    margin-left: 160px;
    margin-top:-20px;
    background:url("http://images.wikia.com/merlin1/images/4/4e/Transparent_background.png");
}

【讨论】：

【解决方案2】：

这是My Example。这是 n 级规则。你应该看看。如果你有一些问题，你应该联系我。谢谢

CSS：

.menu-wrap > li {
    float: left;
    position: relative;
    padding: 5px 15px;
}

.menu-wrap li ul {
    position: absolute;
    visibility: hidden;
    top: 100%;
    left: 0;
    background: #011d27;
    z-index: 999;
    width: 200px;
}

.menu-wrap li:hover > ul,
.menu-wrap li ul li:hover ul {
    visibility: visible;
}

.menu-wrap li ul li {
    padding: 10px 5px;
}

.menu-wrap li ul li ul {
    left: 100%;
    top: 0;
}

【讨论】：