I'm having trouble with the menu on my website. It's not functioning as expected - the dropdown feature isn't working, and two items are not staying in the correct position under the parent ul despite attempts to position them using CSS. Additionally, the background slideshow is not behaving as desired; the images flash quickly instead of displaying for a set duration or showing only one image at a time. Here is the CSS and HTML code:
<div id="myslidemenu" class="jqueryslidemenu"> <br style="clear: right" /> </div>
</nav> <nav class="t3-navbar-collapse navbar-collapse collapse in">
<ul class="nav navbar-nav level0"> </ul> </li>
<li class="dropdown">
<a href="/index.php/features" data-toggle="dropdown" data-target="#">
<img src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-plain/422/06_menu_stack-128.png" alt="Home" style="width:20px;height:20px;top:100px;">
<b class="caret"></b></a>
<ul class="level1 dropdown-menu">
<li>
<a href="/index.php/features/scheduling-routing">Womens </a>
</li>
<li display:display:block; float: left;>
<a href="/index.php/features/billing-invoicing">Kids</a>
</li>
<li>
<a href="/index.php/features/mobile-workforce">Mens</a>
</li>
</ul></li>
</nav>
My goal is to create a vertical menu with a hamburger icon that opens up when clicked, similar to this structure:
Icon Shopping Cart
Item 1
Sub Item 1-1
Sub Item 1-2
Item 2
Item 3
Item 4
In addition, I want the background slideshow to function properly behind the menu.