您的位置：首页 > Web前端 > CSS

一个比较纯洁的DIV+CSS下拉菜单

2009-07-18 12:52 495 查看
这个比较简单，也没啥技术问题可说的，直接上代码加效果图：
一、代码（直接COPY到.html文件即可）：

<!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>DIV+CSS下拉菜单</title>
</style>
</head>

<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'"

onMouseOut="this.className='menu2'">菜单一
<div class="list">
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'"

onMouseOut="this.className='menu2'">菜单二
<div class="list">
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'"

onMouseOut="this.className='menu2'">菜单三
<div class="list">
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'"

onMouseOut="this.className='menu2'">菜单四
<div class="list">
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
<a href="#">子菜单</a><br />
</div>
</li>
</ul>
</div>

</body>
</html>

二、效果图：



解释一下这里纯洁的意思是指没有包含太多的JS，FLASH这类东西^_^

OK，完工了，希望能给大家带来一些帮助，THANKS……
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航