完整的树形菜单 

<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

 

posted @ 2013-11-16 13:36  914556495  阅读(192)  评论(0)    收藏  举报