Menu Menu level three sub menu formating

Question

I had worked on this menu some time back along with some help from stackoverflow community members. old example http://jsfiddle.net/5eecT/17/ this menu was designed tow support only one level of sub menu. Now the requirement has changed and i need to add another level which will show the level 3 sub menu.

I tried to change it but it is not working as designed.

I am thinking of two option as show in image below

New example http://jsfiddle.net/5eecT/22/

I am able to add level 3 menu Sub Sub Menu X but i am struggling with the formatting of these issue. Option one which is the current fiddle has two issue

• when i hover over level 3 menu the main black background of the Mega menu reduces height i want container to maintain the height always irrespective of of i am hovering over level 2 or level 3 menu.
• Second issue is that red triangle also shows up for level 3 menu as marked in the image below in red circle. i need to remove this as and green also under the parent menu, above - Sub Sub Menu 1

I am also thinking of doing it as show in option two (as show in figure)

I would appreciate help in this. I can do level 3 menus using div, but i am not sure if that is a good idea.

Any help in this regard is appreciated.

Answer 1

This is My Example. this is rule with n level. You should view. if you have some problems, you should contact me. Thanks

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

Answer 2

Solved here >>>> submenu solved

Now you can design and do tweaks as u want!

---

added css rules (advantage of my code: no modification of existing code; just added two new css rules to make it work)

---

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");
}