.menu,.menu ul{list-style:none;padding:0;margin:0;z-index:999999;}.menu li{background:#fff;}.menu>li{border-radius:4px;display:block;float:left;position:relative;}.menu a{display:block;line-height:40px;margin-top:5px;padding:0 10px;border-radius:4px;transition:all 0.3s;-webkit-transition:all 0.3s;}.menu li:hover{background:#27a3fe;}.menu li:hover>a{background-color:#27a3fe;color:#fff;}.submenu{left:-21px;width:120px;max-height:0;position:absolute;top:50px;z-index:0;-webkit-perspective:400px;-moz-perspective:400px;-ms-perspective:400px;-o-perspective:400px;perspective:400px;height:465px;}.submenu li{opacity:0;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:opacity .4s,-webkit-transform 1s;-moz-transition:opacity .4s,-moz-transform 1s;-ms-transition:opacity .4s,-ms-transform 1s;-o-transition:opacity .4s,-o-transform 1s;transition:opacity .4s,transform 1s;}.menu .submenu li:hover a{color:#ffffff;}.menu>li:hover .submenu,.menu>li:focus .submenu{max-height:2000px;z-index:10;opacity:0.9;}.menu>li:hover .submenu li,.menu>li:focus .submenu li{opacity:1;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;}.menu li:hover .submenu li:nth-child(1){-webkit-transition-delay:0s;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;}.menu li:hover .submenu li:nth-child(2){-webkit-transition-delay:50ms;-moz-transition-delay:50ms;-ms-transition-delay:50ms;-o-transition-delay:50ms;transition-delay:50ms;}.menu li:hover .submenu li:nth-child(3){-webkit-transition-delay:100ms;-moz-transition-delay:100ms;-ms-transition-delay:100ms;-o-transition-delay:100ms;transition-delay:100ms;}.menu li:hover .submenu li:nth-child(4){-webkit-transition-delay:150ms;-moz-transition-delay:150ms;-ms-transition-delay:150ms;-o-transition-delay:150ms;transition-delay:150ms;}.menu li:hover .submenu li:nth-child(5){-webkit-transition-delay:200ms;-moz-transition-delay:200ms;-ms-transition-delay:200ms;-o-transition-delay:200ms;transition-delay:200ms;}.menu li:hover .submenu li:nth-child(6){-webkit-transition-delay:250ms;-moz-transition-delay:250ms;-ms-transition-delay:250ms;-o-transition-delay:250ms;transition-delay:250ms;}.menu li:hover .submenu li:nth-child(7){-webkit-transition-delay:300ms;-moz-transition-delay:300ms;-ms-transition-delay:300ms;-o-transition-delay:300ms;transition-delay:300ms;}.menu li:hover .submenu li:nth-child(8){-webkit-transition-delay:350ms;-moz-transition-delay:350ms;-ms-transition-delay:350ms;-o-transition-delay:350ms;transition-delay:350ms;}.submenu li:nth-child(1){-webkit-transition-delay:350ms;-moz-transition-delay:350ms;-ms-transition-delay:350ms;-o-transition-delay:350ms;transition-delay:350ms;}.submenu li:nth-child(2){-webkit-transition-delay:300ms;-moz-transition-delay:300ms;-ms-transition-delay:300ms;-o-transition-delay:300ms;transition-delay:300ms;}.submenu li:nth-child(3){-webkit-transition-delay:250ms;-moz-transition-delay:250ms;-ms-transition-delay:250ms;-o-transition-delay:250ms;transition-delay:250ms;}.submenu li:nth-child(4){-webkit-transition-delay:200ms;-moz-transition-delay:200ms;-ms-transition-delay:200ms;-o-transition-delay:200ms;transition-delay:200ms;}.submenu li:nth-child(5){-webkit-transition-delay:150ms;-moz-transition-delay:150ms;-ms-transition-delay:150ms;-o-transition-delay:150ms;transition-delay:150ms;}.submenu li:nth-child(6){-webkit-transition-delay:100ms;-moz-transition-delay:100ms;-ms-transition-delay:100ms;-o-transition-delay:100ms;transition-delay:100ms;}.submenu li:nth-child(7){-webkit-transition-delay:50ms;-moz-transition-delay:50ms;-ms-transition-delay:50ms;-o-transition-delay:50ms;transition-delay:50ms;}.submenu li:nth-child(8){-webkit-transition-delay:0s;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;}