纯css下拉菜单【包括圆角设计】

2015/12/09 16306 

<!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>纯css圆角下拉菜单</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>
        <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>

编程技巧