JQuery Multilevel Drop Down Menu

JavaScript
1

I have been building my first JQuery drop down menu. Using a script studied I have been able to build a simple drop down menu. But, now I want to add multilevel support to it.

Honestly, I have no idea how to go about doing so. So, I’m looking to someone to help me out.

Here is a link to the page: link

And now here is the code:

HTML

<div id="menubar">
<ul id="jsddm">
	<li><a href="#"><img src="images/fyhbtns.png" border="0" /></a></li>
    <li><a href="#"><img src="images/fyhbtns-02.png" border="0" /></a>
    	<ul class="opacity50">
        	<li><a href="#">Service One</a></li>
            <li><a href="#">Service Two</a></li>
            <li><a href="#">Service Three</a></li>
            <li><a href="#">Service Four</a></li>
            <li><a href="#">Service Five</a></li>
        </ul>
    </li>
    <li><a href="#"><img src="images/fyhbtns-03.png" border="0" /></a></li>
    <li><a href="#"><img src="images/fyhbtns-04.png" border="0" /></a></li>
</ul>
</div>

CSS (Yes, I have been toying with CSS3 transparency as well)

@charset "UTF-8";
/* CSS Document */

#jsddm {
	margin: auto;
	padding: 0px;
}
	
#jsddm li {	
	float: left;
	list-style: none;
}

#jsddm li a {	
	display: block;
}
		
#jsddm li ul {	
	width: 230px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	visibility: hidden;
}

#jsddm li ul a {
	padding: 5px;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
		
#jsddm li ul li {
	float: none;
	display: inline;
}
		
#jsddm li ul li a {	
	background: #b6270f;
}
		
#jsddm li ul li a:hover {	
	background: #ffffff;
}

JAVASCRIPT

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

Thanks in advance for your help!

2

Hi,

Did you have any luck with this… I’m looking to do something similar.

Thanks,
Bradley