纯正CSS3圆角下拉导航，超酷的黑色风格导航菜单特效，基于HTML5和CSS3技术实现，比较了传统的CSs，还是觉得HTML5强大啊！
<!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>纯css3圆角下拉菜单</title>
<style type="text/css">
*{margin:0; padding:0;}
#nav{
width:608px;
margin:10px auto;
font-family:Arial;
font-size:16px;
color:#0000FF;}
#nav b{
clear:both;
display:block;
height:1px;
background: #333;
}
.b1,.b10{margin:0 4px;}
.b2,.b9{margin:0 3px; border-left:solid 1px; border-right:solid 1px;}
.b3,.b8{margin:0 2px; border-left:solid 1px; border-right:solid 1px;}
.b4,.b7{margin:0 1px;border-left:solid 1px; border-right:solid 1px;}
.b5,.b6{margin:0;}
#nav #dh{
height:24px;
background: #333;
}
#nav #dh a{display:block;
text-decoration:none;
float:left;
width:100px;
text-align:center;
border-right:solid #CCC 1px;
line-height:150%;
color: #FFF;
position:relative;
}
#nav #dh a.limit{
border:none;
}
#nav #dh a ul{
list-style:none;
position: absolute;
display:none;
background: #333;
left:0;
top:24px;
}
#nav #dh a ul li{
width:100px;
}
#nav #dh a:hover ul{
display:block;
}
#nav #dh a:hover ul li:hover{
background:#CC9966;
color:#FFFF00;
}
</style>
</head>
<body>
<div id="nav">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<div id="dh">
<a href="#">首页
<ul>
<li>下载排行</li>
<li>源码下载</li>
</ul>
</a>
<a href="#">ASP
<ul>
<li>博客系统</li>
<li>图片相册</li>
<li>社区程序</li>
</ul>
</a>
<a href="#">PHP
<ul>
<li>图库微博</li>
<li>社区论坛</li>
<li>企业相册</li>
</ul>
</a>
<a href="#">JSP
<ul>
<li>企业</li>
<li>新闻系统</li>
<li>留言</li>
</ul>
</a>
<a href="#">VC++
<ul>
<li>企业整站</li>
<li>图片相册</li>
<li>社区程序</li>
</ul>
</a>
<a class="limit" href="#">DELPHI
<ul>
<li>系统相关</li>
<li>数据库</li>
</ul>
</a>
</div>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
</div>
</body>
</html>请看运行效果：
