Seeking assistance with a menu issue. I have a horizontal menu with subitems that display when clicked, but having trouble with the submenu behavior. When clicking on a submenu item, I want it to remain open and show the related items underneath it. For example, clicking on "page1" should display the submenu items "page1a" and "page1b", and then clicking on "page1a" should keep the submenu open displaying the rest of the page1 items. Here is the HTML menu code:
<ul id="topnav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">About Us</a>
<!--Submenu starts here-->
<span>
<a href="#">History</a> |
<a href="#">Our Team</a> |
<a href="#">Process</a>
</span>
</li>
<li>
<a href="#">Services</a>
<!--Submenu starts here-->
<span>
<a href="service1.html">Service 1</a> |
<a href="#">Service 2</a> |
<a href="#">Service 3</a> |
<a href="#">Service 4</a> |
<a href="#">Service 5</a> |
<a href="#">Service 6</a>
</span>
</li>
<li>
<a href="#">Products</a>
<!--Submenu starts here-->
<span>
<a href="#">Product A</a> |
<a href="#">Product B</a> |
<a href="#">Product C</a> |
<a href="#">Product D</a> |
<a href="#">Product E</a> |
<a href="#">Product F</a>
</span>
</li>
</ul>
The jQuery function for opening the submenu:
<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{
jsddm_close();
ddmenuitem = $(this).find('span').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{
$('#topnav > li').bind('click', jsddm_open)
$('#topnav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#topnav li a').removeClass('active');
$(this).addClass('active');
}
});
$('.project-tekst').trimTxt();
});
</script>
CSS styling for the menu:
ul#topnav
{
float: left;
width: 900px;
background: #00537F;
padding: 0;
margin: 0;
margin-top: 3px;
position: relative;
list-style: none;
font-size: 12px;
}
ul#topnav li
{
float: left;
margin: 0;
padding: 0;
}
...
(Additional CSS styles omitted for brevity)
Any suggestions or solutions would be greatly appreciated.
Thank you!