《精通CSS》一个下拉菜单的例子

浏览数：21 / 时间：2015年06月09日

这个例子是下拉菜单的，我进行了一点点改动，原理的确很简单，但是作者的代码层次感很清楚，值得学习；另外一点，作者在交互过程中的颜色变化，甚至精确到边框线之间的变化，虽然从旁观者的角度看基本上看不出来这个有什么变化，但是这种细致入微的思考和设计是值得学习和思考的，所谓细微之处方见技艺是否成熟，我觉得这是有道理的！不说了，上代码：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>滑动门航条</title>
  6 <style type="text/css">
  7     *{margin:30 0;padding: 0;list-style: none;}
  8     ul.main,ul.main ul{
  9         float:left;
 10         border:1px solid #486B02;
 11         background-color:#8BD400;
 12         }
 13     ul.main li{
 14         float:left;
 15         width:120px;
 16         height:30px;
 17         line-height:30px;
 18         text-align:center;
 19         }
 20     ul.main li ul{
 21         width:120px;
 22         position:absolute;left:-999em;
 23         }
 24     ul.main li:hover ul{
 25         left:auto;//AUTO时它会自动悬浮在下方
 26         }
 27     ul.main a{
 28         display:block;
 29         color:#2B3F00;
 30         border-left:1px solid #E4FFD3;
 31         border-right:1px solid #486B02;
 32         text-decoration:none;
 33         }
 34     ul.main li li a{
 35         border-top:1px solid #E4FFD3;
 36         border-bottom:1px solid #486B02;
 37         border-left:0;
 38         border-right:0;
 39         }
 40     ul.main li:last-child a{
 41         border-bottom:0;
 42         border-right:0;
 43         }
 44     ul a:hover,ul a:focus{
 45         color:#E4FFD3;
 46         background-color:#6DA203;
 47         }
 48 </style>
 49 </head>
 50 <body>
 51     <ul class="main">
 52         <li><a href="#" class="selected">首页</a></li>
 53         <li><a href="#">教学</a>
 54             <ul>
 55                 <li><a href="#">本科生教学</a></li>
 56                 <li><a href="#">研究生教学</a></li>
 57                 <li><a href="#">中小学教学</a></li>
 58                 <li><a href="#">远程教育</a></li>
 59             </ul>
 60         </li>
 61         <li><a href="#">科研</a>
 62             <ul>
 63                 <li><a href="#">论文发表</a></li>
 64                 <li><a href="#">实验室</a></li>
 65                 <li><a href="#">产品展示</a></li>
 66             </ul>
 67         </li>
 68         <li><a href="#">后勤</a>
 69             <ul>
 70                 <li><a href="#">规章制度</a></li>
 71                 <li><a href="#">资料下载</a></li>
 72                 <li><a href="#">设施开放时间</a></li>
 73                 <li><a href="#">通知公告</a></li>
 74             </ul>
 75         </li>
 76         <li><a href="#">安全保障</a>
 77                <ul>
 78                 <li><a href="#">保卫处</a></li>
 79                 <li><a href="#">网上报警</a></li>
 80                 <li><a href="#">案件公示</a></li>
 81             </ul>
 82         </li>
 83         <li><a href="#">关于我们</a>
 84                <ul>
 85                 <li><a href="#">学校简介</a></li>
 86                 <li><a href="#">校歌校徽</a></li>
 87                 <li><a href="#">校内导航</a></li>
 88                 <li><a href="#">学校历史</a></li>
 89                 <li><a href="#">学校荣誉</a></li>
 90             </ul>
 91         </li>
 92         <li><a href="#">联系我们</a>
 93             <ul>
 94                 <li><a href="#">写邮件</a></li>
 95                 <li><a href="#">联系电话</a></li>
 96                 <li><a href="#">校区地址</a></li>
 97             </ul>
 98         </li>
 99     </ul>
100 </body>
101 </html>