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