纯CSS实现的下拉菜单
一般的下拉菜单都是由javascript 和 css去实现。但CSS3给我们提供了很多方法。
下面的代码就是由纯CSS来实现的漂亮下拉菜单，不包括任何的脚本文件：
它结合了text-shadow、radius-border、box-shadow等等。但这个兼容性并不算好，而且代码量也比较大，实际项目中估计很少用上，但在学习CSS过程中是一个不错的实验，它灵活了利用CSS各种属性实现了原本脚本才能实现的东西。
源代码如下（有详细的解释了）：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>纯CSS下拉菜单</title> 5 <style type="text/css"> 6 body{ 7 background: #ebebeb; 8 width: 900px; 9 margin: 20px auto; 10 color: #666; 11 } 12 a{ 13 color: #333; 14 } 15 #nav{ 16 margin: 0; 17 padding: 7px 6px 0; 18 line-height: 100%;/*实现菜单项垂直居中*/ 19 /*设计圆角外框及阴影*/ 20 border-radius: 2em; 21 -webkit-border-radius: 2em; 22 -moz-border-radius: 2em; 23 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4); 24 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4); 25 /*为菜单外框添加渐变背景效果*/ 26 background: #8b8b8b;/*兼容不支持CSS3浏览器*/ 27 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9',endColorstr='#7a7a7a');/*兼容IE*/ 28 background: -webkit-gradient(linear,left top,left bottom,from(#a9a9a9),to(#7a7a7a));/*兼容webkit引擎浏览器*/ 29 background: -moz-linear-gradient(top,#a9a9a9,#7a7a7a);/*兼容火狐3.6+*/ 30 border: 1px solid #6d6d6d; 31 } 32 #nav li{ /*定义子菜单列表样式*/ 33 margin: 0 5px; 34 padding: 0 0 8px; 35 float: left; /*实现水平并列显示*/ 36 position: relative; /*定义包含块*/ 37 list-style: none; 38 } 39 #nav a{ /*a链接默认样式*/ 40 font-weight: bold; 41 color: #e7e5e5; 42 text-decoration: none; 43 display: block; 44 padding: 8px 20px; 45 margin: 0; 46 /*设计圆角外框及阴影*/ 47 -webkit-border-radius:1.6em; 48 -moz-border-radius:1.6em; 49 text-shadow:0 1px 1px rgba(0,0,0,0.3); 50 } 51 #nav .current a,#nav li:hover>a{ /*主菜单链接，鼠标经过时的效果*/ 52 background: #d1d1d1; 53 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb',endColorstr='#a1a1a1'); 54 background: -webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#a1a1a1)); 55 background: -moz-linear-gradient(top,#ebebeb,#a1a1a1); 56 color: #444; 57 border-top: 1px solid #f8f8f8; 58 -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2); 59 -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2); 60 box-shadow: 0 1px 1px rgba(0,0,0,0.2); 61 text-shadow:0 1px 0 rgba(255,255,255,0.8); 62 } 63 #nav ul li:hover a,#nav li:hover li a{ 64 /*子菜单链接，鼠标经过时的效果*/ 65 background: none; 66 border: none; 67 color: #666; 68 -webkit-box-shadow:none; 69 -moz-box-shadow:none; 70 } 71 #nav ul a:hover{ 72 background: #0399d4 !important; 73 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec',endColorstr='#0186ba'); 74 background: -webkit-gradient(linear,left top,left bottom,from(#04acec),to(#0186ba)) !important; 75 background: -moz-linear-gradient(top,#04acec,#0186ba) !important; 76 color: #fff !important; 77 -webkit-border-radius:0; 78 -moz-border-radius:0; 79 text-shadow:0 1px 1px rgba(0,0,0,0.1); 80 } 81 #nav ul{ /*二级列表项样式*/ 82 background: #ddd; 83 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#cfcfcf'); 84 background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#cfcfcf)); 85 background: -moz-linear-gradient(top,#ffffff,#cfcfcf); 86 display: none; /*在默认状态下隐藏子菜单列表框*/ 87 margin: 0; 88 padding: 0; 89 width: 185px; 90 position: absolute; 91 left: 0; 92 top: 35px; 93 border: 1px solid #b4b4b4; 94 -webkit-border-radius:10px; 95 -moz-border-radius:10px; 96 border-radius:10px; 97 -webkit-box-shadow:0 1px 3px rgba(0,0,0,.3); 98 -moz-box-shadow:0 1px 3px rgba(0,0,0,.3); 99 box-shadow: 0 1px 3px rgba(0,0,0,.3); 100 } 101 #nav li:hover>ul{ /*鼠标经过时显示子菜单*/ 102 display: block; 103 } 104 #nav ul li{ 105 float: none; 106 margin: 0; 107 padding: 0; 108 } 109 #nav ul a{ 110 font-weight: normal; 111 text-shadow:0 1px 1px rgba(255,255,255,0.9); 112 } 113 /*三级菜单样式*/ 114 #nav ul ul{ 115 left: 181px; 116 top: -3px; 117 } 118 #nav ul li:first-child>a{ /*设置第一个元素的圆角效果*/ 119 -webkit-border-top-left-radius:9px; 120 -moz-border-radius-topleft:9px; 121 -webkit-border-top-right-radius:9px; 122 -moz-border-radius-topright:9px; 123 } 124 #nav ul li:last-child>a{ /*设置最后一个元素的圆角效果*/ 125 -webkit-border-bottom-left-radius:9px; 126 -moz-border-radius-bottomleft:9px; 127 -webkit-border-bottom-right-radius:9px; 128 -moz-border-radius-bottomright:9px; 129 } 130 #nav:after{ /*清除固定高度，让菜单框自动张开包含所有子元素*/ 131 content: '.'; 132 display: block; 133 clear: both; 134 visibility: hidden; 135 line-height: 0; 136 height: 0; 137 } 138 #nav{ 139 display: inline-block; 140 } 141 html[xmlns] #nav{ /*兼容IE7*/ 142 display: block; 143 } 144 *html #nav{ /*兼容IE6*/ 145 height: 1%; 146 } 147 </style> 148 </head> 149 <body> 150 <ul id="nav"> 151 <li class="current"><a href="#">主页</a></li> 152 <li><a href="#">主菜单1 >></a> 153 <ul> 154 <li><a href="#">子菜单1</a></li> 155 <li><a href="#">子菜单2</a></li> 156 <li><a href="#">子菜单3 >></a> 157 <ul> 158 <li><a href="#">三级菜单1</a></li> 159 <li><a href="#">三级菜单2</a></li> 160 <li><a href="#">三级菜单3 >></a> 161 <ul> 162 <li><a href="#">四级菜单1</a></li> 163 <li><a href="#">四级菜单2</a></li> 164 <li><a href="#">四级菜单3</a></li> 165 </ul> 166 </li> 167 </ul> 168 </li> 169 </ul> 170 </li> 171 <li><a href="#">主菜单2</a></li> 172 <li><a href="#">主菜单3</a></li> 173 </ul> 174 </body> 175 </html>
