Expandable left list based menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen"> #navigation ul { list-style-type: none; padding: 0; margin: 0; width: 140px; } #navigation a { text-decoration: none; display: block; padding: 3px 12px 3px 8px; background-color: #666; color: #fff; border: 1px solid #ddd; } #navigation a:active { padding: 2px 13px 4px 7px; background-color: #444; color: #eee; border: 1px solid #333; } #navigation li li a { text-decoration: none; padding: 3px 3px 3px 17px; background-color: #999; color: #111111; } #navigation li li a:active { padding: 2px 4px 4px 16px; background-color: #888; color: #000; } </style> <script type="text/javascript"> function swap(targetId){ if (document.getElementById){ target = document.getElementById(targetId); if (target.style.display == "none"){ target.style.display = ""; } else{ target.style.display = "none"; } } } </script> </head> <body> <div id="navigation"> <ul> <li> <a href="#" onclick="swap('sectionOneLinks');return false;">Click me</a> <ul id="sectionOneLinks" style="display: none;"> <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> </ul> </li> <li> <a href="#" onclick="swap('sectionTwoLinks');return false;">Click me</a> <ul id="sectionTwoLinks" style="display: none;"> <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> </ul> </li> <li> <a href="#" onclick="swap('sectionThreeLinks');return false;">Click</a> <ul id="sectionThreeLinks" style="display: none;"> <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> </ul> </li> </ul> </div> </body> </html>