<title>制作树形菜单</title> <style type="text/css"> body{ font-size:13px; line-height:20px; } a{ font-size: 13px; color: #000000; text-decoration: none; } a:hover{font-size:13px; color: #ff0000; } img { vertical-align: middle; border:0; } .childMenu { display:none; list-style:none; } </style> <script type="text/javascript"> function show(id) { var ul = document.getElementById(id); if(ul.style.display == "block") { ul.style.display = "none"; } else { ul.style.display = "block"; } } </script> </head> <body> <b><img src="images/fold.gif" />树形菜单：</b> <p><a href="javascript:show('art');"><img src="images/fclose.gif" />文学艺术</a></p> <ul id="art" class="childMenu"> <li><img src="images/doc.gif" />先锋写作</li> <li> <img src="images/doc.gif" />小说散文</li> <li><img src="images/doc.gif" />诗风词韵</li> </ul> <p><a href="javascript:show('photo');"><img src="images/fclose.gif" />贴图专区</a></p> <ul id="photo" class="childMenu"> <li><img src="images/doc.gif" />真我风采</li> <li> <img src="images/doc.gif" />视频贴图</li> <li><img src="images/doc.gif" />行行摄摄</li> <li><img src="images/doc.gif" />Flash贴图</li> </ul> <p><a href="javascript:show('house');"><img src="images/fclose.gif" />房产论坛</a></p> <ul id="house" class="childMenu"> <li><img src="images/doc.gif" />我要买房</li> <li> <img src="images/doc.gif" />楼市话题</li> <li><img src="images/doc.gif" />我要卖房</li> <li><img src="images/doc.gif" />租房心语</li> <li><img src="images/doc.gif" />二手市场</li> </ul> <p><a href="javascript:show('game');"><img src="images/fclose.gif" />娱乐八卦</a></p> <ul id="game" class="childMenu"> <li><img src="images/doc.gif" />红楼一梦</li> <li> <img src="images/doc.gif" />笑话论坛</li> <li><img src="images/doc.gif" />休闲生活</li> <li><img src="images/doc.gif" />大话春秋</li> </ul> </body