漂亮的绿色多级下拉菜单

发布时间:2007年11月02日      浏览次数:1580 次
<style type="text/css">
.menu{font-size:12px;}
.menu a:link,.menu a:visited{ text-decoration:none;padding: 1px 5px;line-height:20px;color:#000; }
.menu a:hover{ color:#000; border:1px solid #F3D603; background-color:#FEF5BC;line-height:18px;}
.menu ul{ list-style-type: none;margin:0;padding:0;float: none; left:1px;background-color:#F3FCF4;}
.menu ul li{float: left;position: relative; }
.menu ul li a:link,.menu ul li a:visited{ width: 90px;}
.menu ul li a:hover{ color:#000; border:1px solid #F3D603; background-color:#FEF5BC;}
.menu ul li ul{left:1px;position: absolute;top: 1px;visibility: hidden;border:1px solid #81C28A; }
.menu ul li ul li{padding:2px;float: none;}
.menu ul li ul li a:link,.menu ul li ul li a:visited{ width: 110px;}
.point{font-Family:webdings;font-size:10px;}
</style>
<script type="text/javascript">
var menuids=["treemenu"]
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
            if (ultags[t].parentNode.parentNode.id==menuids[i]){
                  ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px"
                  ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
            }
            else{
             ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
      ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
            }
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
<div class="menu">
<ul id="treemenu">
<li><a href="#">菜单一 <span class='point'>6</span></a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三 <span class='point'>4</span></a>
<ul>
<li><a href="#">三级菜单一</a></li>
<li><a href="#">三级菜单二</a></li>
<li><a href="#">三级菜单三</a></li>
<li><a href="#">三级菜单四</a></li>
</ul>
</li>
<li><a href="#">子菜单四</a></li>
</ul>
</li>
<li><a href="#">菜单二 <span class='point'>6</span></a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二 <span class='point'>4</span></a>
<ul>
<li><a href="#">三级菜单一</a></li>
<li><a href="#">三级菜单二</a></li>
<li><a href="#">三级菜单三</a></li>
<li><a href="#">三级菜单四</a></li>
</ul>
</li>
<li><a href="#">子菜单三</a></li>
<li><a href="#">子菜单四</a></li>
</ul>
</a>
</li>
<li><a href="#">菜单六</a></li>
</ul>
</div>
文章来源:桂林唯创网络
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!