Multi level Accordion menu?

From the url example there is only only 2 levels to the left vertical  menu at  Is there a way to make the "Committee" as the root menu and make this into a 3 level menu?  Thank you.
The example is from this url.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hi lapucca,
Although I'm more interested in CSS and HTML zones, I've created the third level for your menu

Try to update the code in your javacsript function, menu html and css as mentioned below

You now have a third level under the links "Advisory Committee" and "Meeting Minutes"

And of course you can adjust the css as you prefer

// Modify the script in the top of your document as below //
<script type="text/javascript"> 
	$(document).ready(function() {
            minWidth:    8,   // minimum width of sub-menus in em units 
            maxWidth:    25,   // maximum width of sub-menus in em units 
            extraWidth:  0     // extra width can ensure lines don't sometimes turn over 
                               // due to slight rounding differences and font-family 
		//slides the element with class "menu_body" when mouse is over the paragraph
		$("#committeeMenu p").mouseover(function()
		$("#committeeMenu a.level2a").mouseover(function()

// Modify the menu html as below //
<div id="committeeMenu" class="menu_list">
						<p style="" class="menu_head"><a href="#">Center Advisory</a></p>
							<div style="display: block;" class="menu_body">
								<a class="level2a" href="">Advisory Committee</a>
								<div class="level2d">
							        <a href="#"">test 1</a>
							        <a href="#"">test 2</a>
								<a class="level2a" href="#">Meeting Minutes</a>
								<div class="level2d">
							        <ul class="level2">
							            <li><a href="#"">test 1</a></li>
							            <li><a href="#"">test 2</a></li>
						<p style="" class="menu_head"><a href="#">Community Health</a></p>
							<div style="display: none;" class="menu_body">							
								<a href="">Care Providers</a>
								<a href="#/">Meeting Minutes</a>								
						<p style="" class="menu_head"><a href="#">Community Leadership</a></p>
							<div style="display: none;" class="menu_body">										
								<a href="">Leadership Council</a>
								<a href="#">Meeting Minutes</a>								

// In your accordionMenu.css file add the below css classes at the end of the file //
.level2d {display:none;}
.level2d ul li {font:normal 8px "Lucida Grande",Tahoma,Arial,Verdana,sans-serif;color:#000;}
.level2d ul li a {width:102px;}

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lapuccaAuthor Commented:
That is great!  Thank you.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.