Important Note: The menu transitions may not work properly in this fiddle, making navigation a bit tricky. This issue is specific to jsfiddle and does not affect the actual website implementation.
In the demonstration provided on my website, there seems to be an issue with the width of the sub-sub-menu. Despite many attempts, I have been unsuccessful in finding a solution that allows the sub-sub-menu to expand according to its contents.
I have tried several approaches over a period of time but unfortunately none of them have worked as intended.
HTML
<div id="nav">
<ul id="nav-menu" class="menu"><li id="menu-item-20816" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20816 first-child"><a>Casters</a>
<ul class="sub-menu">
<li id="menu-item-16927" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16927 first-child"><a href="http://www.casterconcepts.com/all-casters/">All Casters</a></li>
...
... (Content shortened for clarity)
...
<li id="menu-item-12168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12168 last-child"><a href="http://www.casterconcepts.com/company/value-added-services/">Value Added Services</a></li>
</ul> </div>
CSS
#nav{
/* CSS styles go here */
}
...
... (CSS rules omitted for brevity)
...
#nav .has-children-left:after{
border-right: 10px solid rgba(255,255,255,0.2);
border-left: none;
right: auto;
left: 1px;
}