I am currently facing an issue with my Mega menu. It displays two levels of menus perfectly fine, but I need to add a third level as shown in the image below. However, when I try to include the third level, it disrupts the design and causes the Grand Child One and Grand Child Two menus to appear incorrectly.
The image below illustrates how the menu is currently displaying and how it should ideally look like.
You can view a working example on Fiddle at http://jsfiddle.net/5eecT/33/.
I have been trying to resolve this issue for some time now without success, so any assistance would be greatly appreciated.
UPDATE:
If any HTML changes are needed for the third level, that is acceptable to me.
HTML CODE
<div class="menu-wrapper">
<div class="navbar">
<nav class="nav-wrapper" id="nav">
<ul class="nav">
<li> <a href=""> Home </a> </li>
...
... (the rest of the HTML code remains unchanged)
...
</ul>
</nav>
</div>
</div>