CSS实现的红色边框下拉导航菜单代码

代码简介:

只用CSS实现的导航下拉菜单,滑过变色,完全css代码,条例WEB标准,直接复制就可以使用啦,非常不错,推荐给大家。使用时候你可以复制多个菜单单元,这样就真正成了一个导航条,演示只是为了看效果,实际用时请根据你的网页面局修改一下

代码内容:

<!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>
<title>CSS实现的红色边框下拉导航菜单代码_网页代码站(www.webdm.cn)</title>
<style>
.Nav {
}
.Nav li{
float:left;
display:block;
position:relative;
}
.Nav a{
float:left;
display:block;
position:relative;
padding:2px 10px 2px 10px;
font-size:12px;
text-decoration: none;
}
.Nav li a:hover
{
color:#ffffff;
background:#ea0000;
}
.Nav li table {
display:none;
border-collapse:collapse;
}
.Nav li:hover table, .Nav a:hover table {
display:block;
position:absolute;
top:18px;
left:0;
background:#ea0000;
}
.Nav li:hover table a, .Nav a:hover table a {
float:none;
background:#f2f2f2;
color:#000;
width:100px;
border-bottom:1px solid #fff;
}
.Nav li:hover table a:hover, .Nav a:hover table a:hover {
background:#565656;
color:#fff;
}
</style>
</head> 
<body>

<div class='Nav'>
<li>
<a href='http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
'>代码资源
<table><tr><td>
<a href='/'>论坛社区</a>
<a href='/'>新闻文章</a>
</td></tr></table>
</a>
</li>
<li>
<a href='#'>脚本特效
<table><tr><td>
<a href='http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
'>CSS菜单</a>
<a href='/'>表单特效</a>
</td></tr></table>
</a>
</li>
</div>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

代码来自:http://www.webdm.cn/webcode/1920689a-2bec-48df-b897-4f70b12ce6be.html

posted @ 2011-03-07 11:55  网页代码站  阅读(583)  评论(0编辑  收藏  举报