CSS3制作凤凰网导航，所使用的技术并不复杂，你了解了：box-shadow,CSS制作图形，旋转，动画，这样制作这个效果就不会有压力。
<!DOCTYPE html> <html lang="en-US"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>CSS3制作凤凰网导航</title> <link href=‘http://fonts.googleapis.com/css?family=Covered+By+Your+Grace‘ rel=‘stylesheet‘ type=‘text/css‘> <style type="text/css"> *{ margin: 0; padding: 0; } body { font-size: 12px; font-family: ‘Covered By Your Grace‘, cursive; padding: 100px; } .container { width: 960px; margin: 0 auto; } /*menu style start*/ #nav { width: 960px; margin: 50px auto; background: #8c319c; color: #fff; position:relative; box-shadow: -1px 0 0 #732184,-2px 0 0 #732184,-3px 0 0 #732184,-4px 0 0 #732184,-5px 0 0 #732184,-6px 0 0 #732184,-7px 0 0 #732184,-8px 0 0 #732184,-9px 0 0 #732184,-10px 0 0 #732184; border-top: 10px solid #000; float: left; width: 100%; } #nav::before { content:""; border: 5px solid #732184; border-color:#732184 #732184 #cecece #cecece; position: absolute; bottom: 0; left: -10px; width: 0; height: 0; display: block; z-index:2; } #nav::after { content:""; width: 10px; height: 9px; background: #000; position: absolute; top: -9px; left: -10px; display: block; } #nav li { float: left; display: inline; } #nav a { display: block; float: left; padding: 10px 15px; text-decoration: none; text-transform: uppercase; color: #fff; font-weight: bold; font-size: 24px; box-shadow: 2px 0 0 rgba(255,255,255,0.5); -webkit-transition: all 0.5s ease-in .218s; -moz-transition: all 0.5s ease-in .0038s; -o-transition: all 0.5s ease-in .0038s; transition: all 0.5s ease-in .0038s; } #nav .sub-menu { position: absolute; left: 0; top: 100%; background: #eff7f7; right: 0; box-shadow: -1px 0 0 #cecece,-2px 0 0 #cecece,-3px 0 0 #cecece,-4px 0 0 #cecece,-5px 0 0 #cecece,-6px 0 0 #cecece,-7px 0 0 #cecece,-8px 0 0 #cecece,-9px 0 0 #cecece,-10px 0 0 #cecece; } #nav .sub-menu::before { content:""; border: 5px solid #cecece; border-color:#cecece #cecece #fff #fff; position: absolute; bottom: 0; left: -10px; width: 0; height: 0; display: block; z-index:2; } #nav .sub-menu a { color: #000; font-size: 20px; font-weight: normal; } #nav a:hover, #nav .expansion a { background: #eff7f7; color: #000; box-shadow: 1px 0 0 #a5adad, 2px 0 0 #b5bdbd,3px 0 0 #a5adad; padding-top: 14px; margin-top: -4px; } #nav .sub-menu a { background: none; box-shadow: none; padding-top: 10px; margin-top: 0; } #nav .sub-menu a:hover { color: rgb(140, 49, 156); } </style> </head> <body> <div class="container"> <h1>CSS3制作凤凰网导航</h1> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li class="expansion"> <a href="#">Tutorial</a> <ul class="sub-menu"> <li><a href="#">css</a></li> <li><a href="#">css3</a></li> <li><a href="#">html</a></li> <li><a href="#">html5</a></li> <li><a href="#">jquery</a></li> <li><a href="#">javascript</a></li> <li><a href="#">php</a></li> </ul> </li> <li><a href="demo2.html">Demo</a></li> <li><a href="#">Contact</a></li> </ul> <p class="author" style="clear:both;padding-top: 50px;">张力仪</p> </div> </body> </html>