#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>
