<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #nav { width: 200px; } #nav>ul { list-style-type: none; margin: 0px; padding: 0px; } #nav>ul>li { border-bottom: 1px solid #ed9f9f; } #nav>ul>li>a { display: block; padding: 5px 5px 5px 0.5em; text-decoration: none; border-left: 12px solid #711515; border-right: 1px solid #711515; } #nav>ul>li>a:link, #nav>ul>li>a:visited { background-color: #c11136; color: #fff; } #nav>ul>li>a:hover { background-color: #990020; color: #ff0; } #nav ul li ul { list-style-type: none; margin: 0px; padding: 0; } #nav ul li ul li { border-top: 1px solid #ed9f9f; } #nav ul li ul li a { display: block; padding: 3px 3px 3px 0.5em; text-decoration: none; border-left: 28px solid #a71f1f; border-right: 1px solid #711515; } #nav ul li ul li a:link, #nav ul li ul li a:visited { background-color: #e85070; color: #ffffff; } #nav ul li ul li a:hover { background-color: #c2425d; color: #ffff00; } #nav ul li ul.hide { display: none; } #nav ul li ul.show { display: block; } </style> <script> window.onload = function() { var oul = document.getElementById('list'); var ali = oul.childNodes; var oa; for (var i = 0; i < ali.length; i++) { if (ali[i].tagName == 'LI' && ali[i].getElementsByTagName('ul').length) { oa = ali[i].firstChild; oa.onclick = change; } } } function change() { var osd = this.parentNode.getElementsByTagName('ul')[0]; if (osd.className == 'hide') osd.className = 'show'; else osd.className = 'hide'; } </script> </head> <body> <div id="nav"> <ul id="list"> <li><a href="#">home</a></li> <li><a href="#">news</a> <ul class="hide"> <li><a href="#">lastest news</a></li> <li><a href="#">all news</a></li> </ul> </li> <li><a href="#">sports</a> <ul class="hide"> <li><a href="#">basketball</a></li> <li><a href="#">football</a></li> <li><a href="#">volleyball</a></li> </ul> </li> <li><a href="#">weather</a> <ul class="hide"> <li><a href="#">today's weather</a></li> <li><a href="#">forecast</a></li> </ul> </li> <li><a href="#">contact me</a></li> </ul> </div> </body> </html>