<!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{ 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; 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{ 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>