<!-- -moz-:火狐 -webkit-:谷歌 -o-:opera -ms-:IE --> <!DOCTYPE html> <html lang="zh-CN"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>二级CSS3动画下拉菜单</title> <style> body { background: #eee; } #menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu { width: 960px; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); <!--gradient:阴影，在火狐中-moz-gradient(top,#color,#color),在谷歌中-webkit-gradient(linear,top,button,form(#color),to(#color))第一个参数为类型linear(线性渐变)radial(径向渐变),第二和第三为方向参数，第四第五是颜色参数也可以写成-webkit-linear-gradient(#color, #color)--> -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; <!--border-radius:圆角特效--> -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; <!--box-shadow:阴影特效 box-shadow:inset x-offset y-offset blur-radius spread-radius #color; inset:阴影类型为内阴影，默认为外阴影;x-offset:x轴偏移量负数(向左)-正数(向右);y-offset:y轴偏移量负数(向上)-正数(向下);blur-radius:模糊半径;#color:阴影颜色--> zoom: 1; font: 13px "trebuchet MS", Arial, Helvetica; } #menu:before, #menu:after {<!--伪元素--> content: "";<!--必要的--> display: table; } #menu:after { clear: both; } #menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; <!--text-transform:定义文本显示格式 capitalize:首字母大写 uppercase:全部为大写 lowercase:全部为小写--> font: bold 12px Arial, Helvetica; text-decoration: none; <!--text-decoration:定义文本修饰方式 overline:上划线 line-through:横线穿过文字中间 underline:下划线 blink:定义闪烁文本--> text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } #menu ul { margin: 20px 0 0 0; opacity: 0; <!--opacity:不透明度设置0-1，也可以用rgba(,,,)设置--> visibility: hidden; <!--visibility:visible(元素可见)hidden(元素不可见,但依然占位) display:none(元素不可见,不占位，连株子代全部不可见--> position: absolute; top: 38px; left: 0; z-index: 1; background: #444; background: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;<!--作用对象全部,时间0.2秒,速度慢开始慢结束--> <!--transition:实现动画效果--> } #menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; _line-height: 0; -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; width: 130px; _height: 10px; display: block; white-space: nowrap; <!--white-space:文本显示方式 pre(保留空白符) pre-line(合并相同空白符)--> float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style> </head> <body> <div id="menu-wrap"> <ul id="menu"> <li><a href="" target="_blannk">首 页</a></li> <li> <a href="">分 类</a> <ul> <li> <a href="">页面重构</a></li> <li> <a href="">编程语言</a></li> <li> <a href="">调试工具</a></li> <li> <a href="">浏览器</a></li> </ul> </li> <li> <a href="">链 接</a> <ul> <li> <a href="">门户</a></li> <li> <a href="">新闻</a></li> <li> <a href="">社交</a></li> </ul> </li> <li><a href="">关 于</a></li> <li><a href="">联 系</a> <ul> <li><a href="">微博</a></li> <li><a href="">微信</a></li> <li><a href="">E-mail</a></li> </ul> </li> </ul> </div> </body></html>