I found the expanding menu script by Travis Beckham, which works great, except that I'm trying to add another level to it and can't figure out how to make that work. Does anyone know if there's a way to do this, or is it impossible given the current method of using css & js? Basically, I want to first click on the Menu Item to reveal the Sub Menu Items, and then click on the Sub Menu Items to reveal some Sub- Sub Menu Items... The page with the code and demo is at: http://javascript.internet.com/navigation/expanding-menu.html I also pasted the code below: <!-- Paste this code into the CSS section of your HTML document --> ul#menu { width: 100px; list-style-type: none; border-top: solid 1px #b9a894; margin: 0; padding: 0; } ul#menu ol { display: none; text-align: right; list-style-type: none; margin: 0; padding: 5px; } ul#menu li, ul#menu a { font-family: verdana, sans-serif; font-size: 11px; color: #785a3c; } ul#menu li { border-bottom: solid 1px #b9a894; line-height: 15px; } ul#menu ol li { border-bottom: none; } ul#menu ol li:before { content: "- "; } ul#menu a { text-decoration: none; outline: none; } ul#menu a:hover { color: #539dbc; } ul#menu a.active { color: #be5028; } <!-- Paste this code into an external JavaScript file named: expandingMenu.js --> /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com version date: 06/02/03 :: If want to use this code, feel free to do so, but please leave this message intact. (Travis Beckham) */ // Node Functions if(!window.Node){ var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3}; } function checkNode(node, filter){ return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase()); } function getChildren(node, filter){ var result = new Array(); var children = node.childNodes; for(var i = 0; i < children.length; i++){ if(checkNode(children[i], filter)) result[result.length] = children[i]; } return result; } function getChildrenByElement(node){ return getChildren(node, "ELEMENT_NODE"); } function getFirstChild(node, filter){ var child; var children = node.childNodes; for(var i = 0; i < children.length; i++){ child = children[i]; if(checkNode(child, filter)) return child; } return null; } function getFirstChildByText(node){ return getFirstChild(node, "TEXT_NODE"); } function getNextSibling(node, filter){ for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){ if(checkNode(sibling, filter)) return sibling; } return null; } function getNextSiblingByElement(node){ return getNextSibling(node, "ELEMENT_NODE"); } // Menu Functions & Properties var activeMenu = null; function showMenu() { if(activeMenu){ activeMenu.className = ""; getNextSiblingByElement(activeMenu).style.display = "none"; } if(this == activeMenu){ activeMenu = null; } else { this.className = "active"; getNextSiblingByElement(this).style.display = "block"; activeMenu = this; } return false; } function initMenu(){ var menus, menu, text, a, i; menus = getChildrenByElement(document.getElementById("menu")); for(i = 0; i < menus.length; i++){ menu = menus[i]; text = getFirstChildByText(menu); a = document.createElement("a"); menu.replaceChild(a, text); a.appendChild(text); a.href = "#"; a.onclick = showMenu; a.onfocus = function(){this.blur()}; } } if(document.createElement) window.onload = initMenu; <!-- Paste this code into the HEAD section of your HTML document. You may need to change the path of the file. --> <script type="text/javascript" src="expandingMenu.js"></script> <!-- Paste this code into the BODY section of your HTML document --> <ul id="menu"> <li>Menu Item 1 <ol> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> </ol> </li> <li>Menu Item 2 <ol> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> <li><a href="#">Sub Item 2.3</a></li> </ol> </li> <li>Menu Item 3 <ol> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> </ol> </li> <li>Menu Item 4 <ol> <li><a href="#">Sub Item 4.1</a></li> <li><a href="#">Sub Item 4.2</a></li> <li><a href="#">Sub Item 4.3</a></li> </ol> </li> <li>Menu Item 5 <ol> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a></li> <li><a href="#">Sub Item 5.3</a></li> </ol> </li> </ul> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </div><p> Code (markup):