HTML CSS examples for CSS Widget:Menu
Create a CSS3 flip-down animation for menus
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .sub-menu li { position:absolute; -webkit-transform-origin:51% 0%; -o-transform-origin:51% 0%; transform-origin:51% 0%; -webkit-transform:perspective(351px) rotateX(-91deg); -o-transform:perspective(351px) rotateX(-91deg); transform:perspective(351px) rotateX(-91deg); } .sub-menu li:nth-child(1) { -webkit-transition:0.3s linear 0.3s; -o-transition:0.3s linear 0.3s; transition:0.3s linear 0.3s; } .sub-menu li:nth-child(2) { -webkit-transition:0.3s linear 0s; -o-transition:0.3s linear 0s; transition:0.3s linear 0s; top:95px; } .has-children:hover .sub-menu li { -webkit-transform:perspective(351px) rotateX(0deg); -o-transform:perspective(351px) rotateX(0deg); transform:perspective(351px) rotateX(0deg); -webkit-transition:0.3s linear 0s; -o-transition:0.3s linear 0s; transition:0.3s linear 0s; } .has-children:hover li:nth-child(2) { -webkit-transition-delay:0.3s; -o-transition-delay:0.3s; transition-delay:0.3s; } ul,li { padding:0; margin:0; } li {<!-- ww w .j a va2 s . c o m--> list-style-type:none; } li a { background-color:Chartreuse; display:inline-block; padding:11px; } li.main-link { width:21%; } .sub-menu li a { background-color:yellow; } .content { background-color:blue; } </style> </head> <body> <li class="has-children main-link"> <a>Lorem ipsum dolor s</a> <ul class="sub-menu"> <li> <a>Lorem ip</a> </li> <li> <a>Lorem ip</a> </li> </ul> </li> <div class="content"> Lorem ipsum dolor </div> </body> </html>