菜单菜单三级子菜单格式

Question

我曾经在这个菜单上工作过一段时间以及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级菜单，但我不确定这是不是一个好主意。

对此方面的任何帮助表示赞赏。

Answer 1

此处解决＆gt;＆gt;＆gt;＆gt; 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");
}

Answer 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;
}