index.html代码如下:ul class=menulia href=#Home/a/lilia href=#s1Menu 1/aul class=submenulia href=#Submenu a/a/lilia href=#Submenu b/a/lilia href=#Submenu c/a/lilia href=#Submenu d/a/lilia href=#Submenu e/a/lilia href=#Submenu f/a/lilia href=#Submenu g/a/lilia href=#Submenu h/a/li/ul/lili class=activea href=#s2Menu 2/aul class=submenulia href=#Submenu a/a/lilia href=#Submenu b/a/lilia href=#Submenu c/a/lilia href=#Submenu d/a/lilia href=#Submenu e/a/lilia href=#Submenu f/a/lilia href=#Submenu g/a/lilia href=#Submenu h/a/li/ul/lilia href=#Menu 3/aul class=submenulia href=#Submenu a/a/lilia href=#Submenu b/a/lilia href=#Submenu c/a/lilia href=#Submenu d/a/lilia href=#Submenu e/a/lilia href=#Submenu f/a/lilia href=#Submenu g/a/lilia href=#Submenu h/a/li/ul/lilia href=#Menu 4/a/lilia href=#Menu 5/a/li/ul2. CSS代码如下:.menu, .menu ul {list-style: none;padding: 0;margin: 0;}.menu {height: 58px;}.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: 18px;line-height: 54px;padding: 0 25px;text-decoration: none;text-transform: uppercase;}Hover代码段：代码如下:.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;}CSS代码如下:/* submenu styles */.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;}CSS代码如下:/* CSS3 delays for transition effects */.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;}以上就是本文的全部内容了，希望大家能够喜欢。