如何制作下拉菜单式导航栏,提供免费代码
问题描述：用Dreamweaver制作导航栏下拉菜单，在单个网页里能用行为里的“弹出式菜单”来做，但模板是（.dwt)做的，导航栏位于dwt中时行为里这一项里为什么不能用？导航栏中有一项“产品展示”，想把它做成带子菜单的样式！
解决代码：这段代码比较经典的下拉菜单，但没有任何美化，如果想要美化的话，对列的项a,a:hover的属性进行定义就可以了，比如定义一个好的背景等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font:14px "宋体"; color:#333;}
#nav{ width:800px; height:30px; margin:50px auto; background:#ccc; line-height:30px; }
#nav li{ list-style:none; float:left; font-weight:bold; vertical-align:middle;}
#nav li a{ display:block; width:100%; text-align:center; color:#000; text-decoration:none;}
#nav li a:hover{ color:#fff; background:#f00; text-decoration:none;}
#nav li ul{ display:none; position:absolute; background:#999; line-height:25px;}
#nav li.show ul{ display:block;}
#nav li.show ul li{ float:none; font-size:12px;}
#nav li.show ul li a{ text-align:left; padding-left:10%; width:90%;}
#nav li.show ul ul{ display:none;}
#nav li li.show ul{ display:block;}
</style>
<script type="text/javascript">
function getCss(elem,property){
if(elem.style[property]){
return elem.style[property];
}
else if(elem.currentStyle){
return elem.currentStyle[property];
}
else if(document.defaultView && document.defaultView.getComputedStyle){
property = property.replace(/([A-Z])/g,'-$1').toLowerCase();
var s = document.defaultView.getComputedStyle(elem,'');
return s&&s.getPropertyValue(property);
}
else{
return null;
}
}
window.onload = function() {
var obj = document.getElementById("nav");
var lis = obj.getElementsByTagName("li");
var arr = new Array();
var uls = obj.getElementsByTagName("ul")[0];
for(var i=0; i<lis.length; i++){
if(lis[i].className.indexOf("firstLevel")>=0){
arr.push(lis[i]);
}
}
for(var i=0; i<lis.length; i++){
lis[i].style.width = obj.offsetWidth/arr.length - 1 + "px";
if(lis[i].className.indexOf("thirdLevel")>=0){
lis[i].parentNode.style.marginLeft = obj.offsetWidth/arr.length - 1 + "px";
lis[i].parentNode.style.marginTop = -parseInt(getCss(uls,"lineHeight")) + "px";
}
lis[i].onmouseover=function(){
this.className+=(this.className.length>0?" ":"") + "show";
}
lis[i].onmouseout=function(){
this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
}
}
}
</script>
</head>
<body>
<ul id="nav">
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
</li>
<li>
<a href="#">二级栏目</a>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
将代码复制在Dreamweave中就可以了。
更多精彩尽在站长资源库电脑知识网 www.zzzyk.com
