纯css3圆角下拉菜单 都没敢用js 

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

 

posted @ 2013-12-27 15:48  代号 11  阅读(275)  评论(0)  编辑  收藏  举报