|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | <style type="text/css"> | | <style type="text/css"> |
| − | .menu, .menu ul {
| |
| − | list-style: none;
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | }
| |
| − | .menu {
| |
| − | height: 20px;
| |
| − | }
| |
| − | .menu li {
| |
| − | background: -moz-linear-gradient(#292929, #252525);
| |
| − | background: -ms-linear-gradient(#292929, #252525);
| |
| − | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
| |
| − | background: -webkit-linear-gradient(#292929, #252525);
| |
| − | background: -o-linear-gradient(#292929, #252525);
| |
| − | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
| |
| − | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
| |
| − | background: linear-gradient(#292929, #252525);
| |
| | | | |
| − | border-bottom: 2px solid #181818;
| |
| − | border-top: 2px solid #303030;
| |
| − | min-width: 160px;
| |
| − | }
| |
| − | .menu > li {
| |
| − | display: block;
| |
| − | float: left;
| |
| − | position: relative;
| |
| − | }
| |
| − | .menu > li:first-child {
| |
| − | border-radius: 5px 0 0;
| |
| − | }
| |
| − | .menu a {
| |
| − | border-left: 3px solid rgba(0, 0, 0, 0);
| |
| − | color: #808080;
| |
| − | display: block;
| |
| − | font-family: 'Lucida Console';
| |
| − | font-size: 10px;
| |
| − | line-height: 54px;
| |
| − | padding: 0 25px;
| |
| − | text-decoration: none;
| |
| − | text-transform: uppercase;
| |
| − | }
| |
| − |
| |
| − | .menu li:hover {
| |
| − | background-color: #1c1c1c;
| |
| − | background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
| |
| − | background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
| |
| − | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
| |
| − | background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
| |
| − | background: -o-linear-gradient(#1c1c1c, #1b1b1b);
| |
| − | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
| |
| − | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
| |
| − | background: linear-gradient(#1c1c1c, #1b1b1b);
| |
| − |
| |
| − | border-bottom: 2px solid #222222;
| |
| − | border-top: 2px solid #1B1B1B;
| |
| − | }
| |
| − | .menu li:hover > a {
| |
| − | border-radius: 5px 0 0 0;
| |
| − | border-left: 3px solid #C4302B;
| |
| − | color: #C4302B;
| |
| − | }
| |
| − |
| |
| − | .submenu {
| |
| − | left: 0;
| |
| − | max-height: 0;
| |
| − | position: absolute;
| |
| − | top: 100%;
| |
| − | z-index: 0;
| |
| − |
| |
| − | -webkit-perspective: 400px;
| |
| − | -moz-perspective: 400px;
| |
| − | -ms-perspective: 400px;
| |
| − | -o-perspective: 400px;
| |
| − | perspective: 400px;
| |
| − | }
| |
| − | .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 .5s;
| |
| − | -moz-transition: opacity .4s, -moz-transform .5s;
| |
| − | -ms-transition: opacity .4s, -ms-transform .5s;
| |
| − | -o-transition: opacity .4s, -o-transform .5s;
| |
| − | transition: opacity .4s, transform .5s;
| |
| − | }
| |
| − | .menu .submenu li:hover a {
| |
| − | border-left: 3px solid #454545;
| |
| − | border-radius: 0;
| |
| − | color: #ffffff;
| |
| − | }
| |
| − | .menu > li:hover .submenu, .menu > li:focus .submenu {
| |
| − | max-height: 2000px;
| |
| − | z-index: 10;
| |
| − | }
| |
| − | .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;
| |
| − | }
| |
| | </style> | | </style> |
| | </html> | | </html> |
