I'm having an issue with my sidepanel vertical navigation where sub-menus are not being displayed properly due to a div container. The width of the div container [side-panel-links] is causing the sub-menus and children of the sub-menus to be cut off. If the width of the div container is extended, the sub-menus can be seen.
Is there a way to make the sub-menus overlap the div container in order to display them correctly?
You can view the demo here: http://jsfiddle.net/xkBZE/1/
Here's a snippet of the HTML code :
<div class="side-panel-links left">
<div class="side-panel-links-scroll">
<div id="myslidemenu" class="jqueryslidemenu">
<ul id="side-panel-list">
<li>
<a href="#">Test 1</a>
<ul class="side-panel-list-child"></ul>
</li>
<li>
<a href="#">Test 2</a>
<ul class="side-panel-list-child">
<li>Test 2-1
<ul class="side-panel-list-child">
<li>Test 2-1-1
<ul class="side-panel-list-child">
<li>Test 2-1-1-1
<ul class="side-panel-list-child"></ul>
</li>
</ul>
</li>
<li>Test 2-1-2
<ul class="side-panel-list-child"></ul>
</li>
</ul>
</li>
<li>Test 2-2
<ul class="side-panel-list-child">
<li>Test 2-2-1
<ul class="side-panel-list-child"></ul>
</li>
</ul>
</li>
<li>Test 2-3
<ul class="side-panel-list-child">
<li>Test 2-3-1
<ul class="side-panel-list-child">
<li>Test 2-3-1-1
<ul class="side-panel-list-child"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Test 3</a>
<ul class="side-panel-list-child"></ul>
</li>
<li>
<a href="#">Test 4</a>
<ul class="side-panel-list-child"></ul>
</li>
</ul>
</div>
</div>
</div>
Any help is appreciated!