提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>純css導覽功能表效果</title><style type="text/css">* { margin: 0;padding: 0;box-sizing: border-box;}body {padding: 30px;font-family: "Helvetica Neue", helvetica, arial;background:-webkit-linear-gradient(top, #fff, #efefef);box-shadow:0px 1px 3px #999;}#container {position: relative;width: 940px;}#container:after {content: "";display: block;clear: both;height: 0;}#menu {position: relative;float: left;width: 100%;padding: 0 20px;border-radius: 3px;box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);background: #ccc;}#menu, #menu ul {list-style: none;}#menu > li {float: left;position: relative;border-right: 1px solid rgba(0,0,0,.1);box-shadow: 1px 0 0 rgba(255,255,255,.25);perspective: 1000px;}#menu > li:first-child {border-left: 1px solid rgba(255,255,255,.25);box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);}#menu a {display: block;position: relative;z-index: 10;padding: 13px 20px 13px 20px;text-decoration: none;color: rgba(75,75,75,1);line-height: 1;font-weight: 600;font-size: 12px;letter-spacing: -.05em;background: transparent;text-shadow: 0 1px 1px rgba(255,255,255,.9);transition: all .25s ease-in-out;}#menu > li:hover > a {background: #333;color: rgba(0,223,252,1);text-shadow: none;}#menu li ul {position: absolute;left: 0;z-index: 1;width: 200px;padding: 0;opacity: 0;visibility: hidden;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;background: transparent;overflow: hidden;transform-origin: 50% 0%;}#menu li:hover ul {padding: 15px 0;background: #333;opacity: 1;visibility: visible;box-shadow: 1px 1px 7px rgba(0,0,0,.5);animation-name: swingdown;animation-duration: 1s;animation-timing-function: ease;}@keyframes swingdown {0% {opacity: .99999;transform: rotateX(90deg);}30% {transform: rotateX(-20deg) rotateY(5deg);animation-timing-function: ease-in-out;}65% {transform: rotateX(20deg) rotateY(-3deg);animation-timing-function: ease-in-out;}100% {transform: rotateX(0);animation-timing-function: ease-in-out;}}#menu li li a {padding-left: 15px;font-weight: 400;color: #ddd;text-shadow: none;border-top: dotted 1px transparent;border-bottom: dotted 1px transparent;transition: all .15s linear;}#menu li li a:hover {color: rgba(0,223,252,1);border-top: dotted 1px rgba(255,255,255,.15);border-bottom: dotted 1px rgba(255,255,255,.15);background: rgba(0,223,252,.02);}</style><script type="text/javascript" src="http://public.stewart.com/seth/js/prefixfree.min.js"></script></head><body><div id="container"><ul id="menu"> <li>About Me<ul><li>Lorem ipsum dolor</li><li>Maecenas lacinia sem</li><li>Suspendisse fringilla</li></ul></li><li>Portfolio<ul><li>Lorem ipsum dolor</li><li>Maecenas dignissim fermentum luctus</li><li>Suspendisse fringilla</li><li>Lorem ipsum dolor</li><li>Maecenas lacinia sem</li><li>Suspendisse fringilla</li></ul></li><li>Clients<ul><li>Lorem ipsum dolor</li><li>Maecenas lacinia sem</li><li>Suspendisse fringilla</li></ul></li><li>Contact Me<ul><li>Lorem ipsum dolor</li><li>Maecenas dignissim fermentum luctus</li><li>Suspendisse fringilla</li></ul></li><li>Support</li></ul></div></body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
