Tip: you can modify some code before running
<!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>Pure css navigation menu effect</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 (600,); line-height: 1; font-weight:; font-size: 12px; letter-spacing :-. 05em; background: transparent; text-shadow: 0 1px 1px rgba (255,255,255 ,. 9); transition: all. 25 s queue-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 ,. 5); animation-name: swingdown; animation-duration: 1 s; animation-timing-function: progress;} @ keyframes swingdown {0% {opacity :. 99999; transform: rotateX (90deg);} 30% {transform: rotateX (-20deg) rotateY (5deg); animation-timing-function: Role-in-out ;} 65% {transform: rotateX (20deg) rotateY (-3deg); animation-timing-function: Role-in-out;} 100% {transform: rotateX (0 ); animation-timing-function: memory-in-out ;}# menu 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. 15 s linear ;}# menu 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>
Tip: you can modify some code before running
