相关文章
网站制作IIS站点建立
网站设计模板设计完全学习视频教材（第六集）
网站制作HTML中的表格元素
网站建设CSS实用教程(二)
网站制作Flash MX 2004 项目管理
北京网站建设Flash AS3 相对于AS2 新的特性和改动
网站设计Flash视频教程：2.10 绘制花朵
网站设计Dreamweaver中加入竖直线的办法
北京网站设计用 javascript 写的一个映射表类
网页设计4天学会 NoahWeb 表单 - 第二天
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 企通互联网页设计CSS制作的垂直导航菜单效果
企通互联网页设计CSS制作的垂直导航菜单效果
<script> 企通互联北京网站设计
startList = function() {网站制作
if (document.all&&document.getElementById) {企通互联
navRoot = document.getElementById("nav");北京网站建设
for (i=0; i<navRoot.childNodes.length; i++) {北京网站建设
node = navRoot.childNodes[i];北京网站建设
if (node.nodeName=="LI") {网站建设
node.onmouseover=function() {北京网站制作
this.className+=" over";网页设计
}网站设计
node.onmouseout=function() {企通互联
this.className=this.className.replace(" over", "");网站制作
}网页设计
}网站设计
} 北京网站设计企通互联
}北京网页设计
}北京网站设计
window.onload=startList;北京网站建设
</script>网页设计
<style>北京网站制作
body {北京网站制作
font: normal 11px verdana;北京网站设计
}
ul {北京网站设计
margin: 0;北京网页设计
padding: 0;企通互联
list-style: none; 北京网页设计北京网页设计
width: 150px; /* Width of Menu Items */ 网站设计网站建设
border-bottom: 1px solid #ccc;北京网站设计
}
ul li {网站设计 北京网站制作
position: relative;企通互联
}网站建设
网站设计
li ul {北京网页设计
position: absolute;网页设计
left: 149px; /* Set 1px less than menu width */北京网页设计
top: 0;企通互联
display: none;网页设计
}
/* Styles for Menu Items */北京网站设计
ul li a {网站设计
display: block;网站建设
text-decoration: none;网页设计
color: #777;北京网站设计
background: #fff; /* IE6 Bug */网页设计 网站制作
padding: 5px;网站设计
border: 1px solid #ccc;企通互联
border-bottom: 0;北京网站建设
}
/* Fix IE. Hide from IE Mac \*/网页设计
* html ul li { float: left; height: 1%; }北京网站制作
* html ul li a { height: 1%; }网页设计
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */网站设计
企通互联 www.qitongnet.com
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */北京网站制作
北京网站设计
li:hover ul, li.over ul { display: block; } /* The magic */北京网页设计
</style>
<ul id="nav"> 企通互联
<li><a href="#">chinahtml</a></li> 北京网页设计
<li><a href="#">About</a> 企通互联
<ul> 企通互联
<li><a href="#">History</a></li> 北京网站建设
<li><a href="#">Team</a></li> 北京网站制作
<li><a href="#">Offices</a></li> 网站建设
</ul> 网站建设
</li> 北京网站建设
<li><a href="#">Services</a> 网站建设
<ul> 网站设计
<li><a href="#">Web Design</a></li> 网站制作
<li><a href="#">Internet Marketing</a></li> 网站建设
<li><a href="#">Hosting</a></li> 网站设计
<li><a href="#">Domain Names</a></li> 网站制作
<li><a href="#">Broadband</a></li> 网站制作
</ul> 网页设计
</li> 企通互联
<li><a href="#">Contact Us</a> 网站设计
<ul> 北京网站建设
<li><a href="#">United Kingdom</a></li> 网页设计
<li><a href="#">France</a></li> 北京网站设计
<li><a href="#">USA</a></li> 网站建设网站建设
<li><a href="#">Australia</a></li> 网站建设
</ul> 网站建设
</li> 网站设计
</ul>
友情提示：全选代码复制运行，您也可以先修改部分代码再运行。