<!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=gb2312" />
<title>一个简单的二级导航效果</title>
<style type="text/css">
<!--
ul {
padding: 0;
margin: 0;
list-style:none;
}
li {
float:left;
width:160px;
}
li ul {
display: none;
top: 20px;
}
li:hover ul,li.over ul {
display: block;
}
-->
</style>
<script language="javascript">
startList = function()
{
navli = document.getElementById("nav").document.getElementsByTagName("li");
if(navli)
{
for(i=0 ; i<navli.length ; i++)
{
navli[i].onmouseover = function()
{
this.className+=" over";
}
navli[i].onmouseout = function()
{
this.className = this.className.replace("over","");
}
}
}
}
window.onload = startList;
</script>
</head>
<body>
<ul id="nav">
<li><a href="">文章</a>
<ul>
<li><a href="">css教程</a></li>
<li><a href="">css教程</a></li>
<li><a href="">css教程</a></li>
<li><a href="">css教程</a></li>
</ul>
</li>
<li><a href="">参考</a>
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">XHTML</a></li>
<li><a href="">XHTML</a></li>
</ul>
</li>
<li><a href="">Blog</a>
<ul>
<li><a href="">全部</a></li>
<li><a href="">全部</a></li>
<li><a href="">全部</a></li>
<li><a href="">全部</a></li>
</ul>
</li>
</ul>
</body>
</html>
逸云 - 秦皇岛最好的网站建设、网站制作、网络推广与SEO网站优化团队
秦皇岛网站制作 | 秦皇岛网站建设 | 秦皇岛网络公司 | 网页制作 | 做网站 | 秦皇岛SEO | 网站优化 | 网站推广 | 网络营销 | 百度排名推广 | 营销型网站制作
我们提供企业网站建设与推广全套解决方案，致力于提升秦皇岛本地企业的全国竞争能力，帮助你成倍提高公司销售业绩！
2009-3-19 16:10:54
css二级下拉菜单
Tags: css 下拉菜单
发布:逸云 | 分类:网站制作 | 评论:0 | 引用:0 | 浏览:
- 相关文章:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。