css实现8款不同主题的顶部下拉导航菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现8款不同主题的顶部下拉导航菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        #menu1 {
        font-family:Arial,sans-serif;
        font-size:12px;
        background-color:#202020;
        width:900px;
        height:40px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        padding:0 20px;
        display:block;
        line-height:1
}
#menu1 h1,#menu1 ul,#menu1 p,#menu1 img {
        margin:0;
        padding:0;
        border:0
}
#menu1 h1 {
        font-weight:400
}
#menu1 ul {
        list-style:none
}
#menu1 a {
        text-decoration:none;
        color:#d0d0d0
}
#menu1 .menu-label {
        font-weight:700;
        text-transform:uppercase
}
#menu1 .menu-top>li {
        float:left;
        position:relative;
        text-align:center;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu1 .menu-top>li:hover {
        background-color:#4a4a4a;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu1 .menu-top .menu-right {
        float:right
}
#menu1 .menu-button {
        display:block;
        line-height:40px;
        padding:0 20px;
        color:#d0d0d0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu1 li:hover .menu-button {
        color:#fff;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu1 .menu-drop {
        padding-right:15px
}
#menu1 .menu-drop .menu-label {
        padding-right:20px;
        background:url(../image/menu1-drop1.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu1 li:hover .menu-drop .menu-label {
        background:url(../image/menu1-drop2.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu1 .menu-dropdown {
        text-align:left;
        background-color:#4a4a4a;
        -webkit-border-radius:0 0 5px 5px;
        -moz-border-radius:0 0 5px 5px;
        -ms-border-radius:0 0 5px 5px;
        -o-border-radius:0 0 5px 5px;
        border-radius:0 0 5px 5px;
        position:absolute;
        left:-5000px;
        opacity:0;
        z-index:100
}
#menu1 li:hover .menu-dropdown {
        left:0;
        opacity:1;
        -webkit-transition:opacity .2s;
        -moz-transition:opacity .2s;
        -ms-transition:opacity .2s;
        -o-transition:opacity .2s;
        transition:opacity .2s
}
#menu1 .menu-right:hover .menu-dropdown {
        left:auto;
        right:0
}
#menu1 .menu-sub {
        margin:5px 0
}
#menu1 .menu-sub li {
        white-space:nowrap;
        -webkit-transition:background-color .1s;
        -moz-transition:background-color .1s;
        -ms-transition:background-color .1s;
        -o-transition:background-color .1s;
        transition:background-color .1s
}
#menu1 .menu-sub li:hover {
        background:#2a2a2a url(../image/menu1-select.png) no-repeat 10px;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu1 .menu-subbutton {
        display:block;
        padding:7px 20px;
        line-height:1.3;
        color:#d0d0d0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu1 .menu-sub li:hover .menu-subbutton {
        color:#fff;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu1 .menu-desc {
        font-style:italic;
        color:#a0a0a0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu1 .menu-sub li:hover .menu-desc {
        color:#d0d0d0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu1 .menu-row {
        vertical-align:text-top;
        display:inline-block;
        zoom:1;
        *display:inline
}
#menu1 .menu-row .menu-sub {
        margin:0
}
#menu1 h1 {
        font-size:2em;
        color:#a0a0a0
}
#menu1 p {
        color:#e5e5e5
}
#menu1 .emp {
        font-weight:700
}
#menu1 .quote {
        font-style:italic
}
#menu1 .menu-dropdown3 {
        padding-top:5px;
        white-space:nowrap
}
#menu1 .menu-dropdown3 h1 {
        margin:0 0 5px 20px
}
#menu1 .menu-dropdown3 .menu-row {
        border-right:1px dotted #707070;
        margin:5px 0
}
#menu1 .menu-dropdown3 .menu-row:last-child {
        border-right:0
}
#menu1 .menu-dropdown4 {
        padding-top:5px;
        white-space:nowrap
}
#menu1 .menu-dropdown4 h1 {
        margin:0 0 5px 20px
}
#menu1 .menu-dropdown4 .menu-row div {
        border-right:1px dotted #707070;
        margin:5px 0 10px
}
#menu1 .menu-dropdown4 .menu-row:last-child div {
        border-right:0
}
#menu1 .menu-dropdown4 .menu-row div:last-child {
        margin-bottom:5px
}
#menu1 .menu-dropdown6 img {
        margin-right:5px;
        vertical-align:middle
}
#menu1 .menu-dropdown6 .menu-label {
        vertical-align:middle
}
#menu1 .menu-dropdown6 .menu-subbutton {
        padding:5px 20px
}
#menu1 .menu-dropdown7 {
        padding:10px;
        width:210px
}
#menu1 .menu-dropdown7 p {
        margin-top:7px
}
#menu1 .menu-dropdown7 h1 {
        color:#e0e0e0;
        padding-bottom:3px;
        border-bottom:1px solid #858585
}
#menu2 {
        font-family:Arial,sans-serif;
        font-size:12px;
        background-color:#404040;
        width:900px;
        height:40px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        padding:0 20px;
        display:block;
        line-height:1
}
#menu2 h1,#menu2 ul,#menu2 p,#menu2 img {
        margin:0;
        padding:0;
        border:0
}
#menu2 h1 {
        font-weight:400
}
#menu2 ul {
        list-style:none
}
#menu2 a {
        text-decoration:none;
        color:#e0e0e0
}
#menu2 .menu-label {
        font-weight:700;
        text-transform:uppercase
}
#menu2 .menu-top>li {
        float:left;
        position:relative;
        text-align:center;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu2 .menu-top>li:hover {
        background-color:#c5c5c5;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu2 .menu-top .menu-right {
        float:right
}
#menu2 .menu-button {
        display:block;
        line-height:40px;
        padding:0 20px;
        color:#e0e0e0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu2 li:hover .menu-button {
        color:#404040;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu2 .menu-drop {
        padding-right:15px
}
#menu2 .menu-drop .menu-label {
        padding-right:20px;
        background:url(../image/menu2-drop1.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu2 li:hover .menu-drop .menu-label {
        background:url(../image/menu2-drop2.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu2 .menu-dropdown {
        text-align:left;
        background-color:#c5c5c5;
        -webkit-border-radius:0 0 5px 5px;
        -moz-border-radius:0 0 5px 5px;
        -ms-border-radius:0 0 5px 5px;
        -o-border-radius:0 0 5px 5px;
        border-radius:0 0 5px 5px;
        position:absolute;
        left:-5000px;
        opacity:0;
        z-index:100
}
#menu2 li:hover .menu-dropdown {
        left:0;
        opacity:1;
        -webkit-transition:opacity .2s;
        -moz-transition:opacity .2s;
        -ms-transition:opacity .2s;
        -o-transition:opacity .2s;
        transition:opacity .2s
}
#menu2 .menu-right:hover .menu-dropdown {
        left:auto;
        right:0
}
#menu2 .menu-sub {
        margin:5px 0
}
#menu2 .menu-sub li {
        white-space:nowrap;
        -webkit-transition:background-color .1s;
        -moz-transition:background-color .1s;
        -ms-transition:background-color .1s;
        -o-transition:background-color .1s;
        transition:background-color .1s
}
#menu2 .menu-sub li:hover {
        background:#505050 url(../image/menu2-select.png) no-repeat 10px;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu2 .menu-subbutton {
        display:block;
        padding:7px 20px;
        line-height:1.3;
        color:#404040;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu2 .menu-sub li:hover .menu-subbutton {
        color:#e0e0e0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu2 .menu-desc {
        font-style:italic;
        color:#5f5f5f;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu2 .menu-sub li:hover .menu-desc {
        color:#d0d0d0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu2 .menu-row {
        vertical-align:text-top;
        display:inline-block;
        zoom:1;
        *display:inline
}
#menu2 .menu-row .menu-sub {
        margin:0
}
#menu2 h1 {
        font-size:2em;
        color:#7a7a7a
}
#menu2 p {
        color:#505050
}
#menu2 .emp {
        font-weight:700
}
#menu2 .quote {
        font-style:italic
}
#menu2 .menu-dropdown3 {
        padding-top:5px;
        white-space:nowrap
}
#menu2 .menu-dropdown3 h1 {
        margin:0 0 5px 20px
}
#menu2 .menu-dropdown3 .menu-row {
        border-right:1px dotted #707070;
        margin:5px 0
}
#menu2 .menu-dropdown3 .menu-row:last-child {
        border-right:0
}
#menu2 .menu-dropdown4 {
        padding-top:5px;
        white-space:nowrap
}
#menu2 .menu-dropdown4 h1 {
        margin:0 0 5px 20px
}
#menu2 .menu-dropdown4 .menu-row div {
        border-right:1px dotted #707070;
        margin:5px 0 10px
}
#menu2 .menu-dropdown4 .menu-row:last-child div {
        border-right:0
}
#menu2 .menu-dropdown4 .menu-row div:last-child {
        margin-bottom:5px
}
#menu2 .menu-dropdown6 img {
        margin-right:5px;
        vertical-align:middle
}
#menu2 .menu-dropdown6 .menu-label {
        vertical-align:middle
}
#menu2 .menu-dropdown6 .menu-subbutton {
        padding:5px 20px
}
#menu2 .menu-dropdown7 {
        padding:10px;
        width:210px
}
#menu2 .menu-dropdown7 p {
        margin-top:7px
}
#menu2 .menu-dropdown7 h1 {
        color:#707070;
        padding-bottom:3px;
        border-bottom:1px solid #858585
}
#menu3 {
        font-family:Arial,sans-serif;
        font-size:12px;
        background-color:silver;
        width:900px;
        height:40px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        padding:0 20px;
        display:block;
        line-height:1
}
#menu3 h1,#menu3 ul,#menu3 p,#menu3 img {
        margin:0;
        padding:0;
        border:0
}
#menu3 h1 {
        font-weight:400
}
#menu3 ul {
        list-style:none
}
#menu3 a {
        text-decoration:none;
        color:#505050
}
#menu3 .menu-label {
        font-weight:700;
        text-transform:uppercase
}
#menu3 .menu-top>li {
        float:left;
        position:relative;
        text-align:center;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu3 .menu-top>li:hover {
        background-color:#404040;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu3 .menu-top .menu-right {
        float:right
}
#menu3 .menu-button {
        display:block;
        line-height:40px;
        padding:0 20px;
        color:#505050;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu3 li:hover .menu-button {
        color:#e0e0e0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu3 .menu-drop {
        padding-right:15px
}
#menu3 .menu-drop .menu-label {
        padding-right:20px;
        background:url(../image/menu3-drop1.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu3 li:hover .menu-drop .menu-label {
        background:url(../image/menu2-drop1.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu3 .menu-dropdown {
        text-align:left;
        background-color:#404040;
        -webkit-border-radius:0 0 5px 5px;
        -moz-border-radius:0 0 5px 5px;
        -ms-border-radius:0 0 5px 5px;
        -o-border-radius:0 0 5px 5px;
        border-radius:0 0 5px 5px;
        position:absolute;
        left:-5000px;
        opacity:0;
        z-index:100
}
#menu3 li:hover .menu-dropdown {
        left:0;
        opacity:1;
        -webkit-transition:opacity .2s;
        -moz-transition:opacity .2s;
        -ms-transition:opacity .2s;
        -o-transition:opacity .2s;
        transition:opacity .2s
}
#menu3 .menu-right:hover .menu-dropdown {
        left:auto;
        right:0
}
#menu3 .menu-sub {
        margin:5px 0
}
#menu3 .menu-sub li {
        white-space:nowrap;
        -webkit-transition:background-color .1s;
        -moz-transition:background-color .1s;
        -ms-transition:background-color .1s;
        -o-transition:background-color .1s;
        transition:background-color .1s
}
#menu3 .menu-sub li:hover {
        background:silver url(../image/menu3-select.png) no-repeat 10px;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu3 .menu-subbutton {
        display:block;
        padding:7px 20px;
        line-height:1.3;
        color:#d0d0d0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu3 .menu-sub li:hover .menu-subbutton {
        color:#505050;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu3 .menu-desc {
        font-style:italic;
        color:#a0a0a0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu3 .menu-sub li:hover .menu-desc {
        color:#505050;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu3 .menu-row {
        vertical-align:text-top;
        display:inline-block;
        zoom:1;
        *display:inline
}
#menu3 .menu-row .menu-sub {
        margin:0
}
#menu3 h1 {
        font-size:2em;
        color:#b0b0b0
}
#menu3 p {
        color:#e5e5e5
}
#menu3 .emp {
        font-weight:700
}
#menu3 .quote {
        font-style:italic
}
#menu3 .menu-dropdown3 {
        padding-top:5px;
        white-space:nowrap
}
#menu3 .menu-dropdown3 h1 {
        margin:0 0 5px 20px
}
#menu3 .menu-dropdown3 .menu-row {
        border-right:1px dotted #707070;
        margin:5px 0
}
#menu3 .menu-dropdown3 .menu-row:last-child {
        border-right:0
}
#menu3 .menu-dropdown4 {
        padding-top:5px;
        white-space:nowrap
}
#menu3 .menu-dropdown4 h1 {
        margin:0 0 5px 20px
}
#menu3 .menu-dropdown4 .menu-row div {
        border-right:1px dotted #707070;
        margin:5px 0 10px
}
#menu3 .menu-dropdown4 .menu-row:last-child div {
        border-right:0
}
#menu3 .menu-dropdown4 .menu-row div:last-child {
        margin-bottom:5px
}
#menu3 .menu-dropdown6 img {
        margin-right:5px;
        vertical-align:middle
}
#menu3 .menu-dropdown6 .menu-label {
        vertical-align:middle
}
#menu3 .menu-dropdown6 .menu-subbutton {
        padding:5px 20px
}
#menu3 .menu-dropdown7 {
        padding:10px;
        width:210px
}
#menu3 .menu-dropdown7 p {
        margin-top:7px
}
#menu3 .menu-dropdown7 h1 {
        color:#e5e5e5;
        padding-bottom:3px;
        border-bottom:1px solid #858585
}
#menu4 {
        font-family:Arial,sans-serif;
        font-size:12px;
        background-color:#303030;
        width:900px;
        height:40px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        padding:0 20px;
        display:block;
        line-height:1
}
#menu4 h1,#menu4 ul,#menu4 p,#menu4 img {
        margin:0;
        padding:0;
        border:0
}
#menu4 h1 {
        font-weight:400
}
#menu4 ul {
        list-style:none
}
#menu4 a {
        text-decoration:none;
        color:#fafafa
}
#menu4 .menu-label {
        font-weight:700;
        text-transform:uppercase
}
#menu4 .menu-top>li {
        float:left;
        position:relative;
        text-align:center;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu4 .menu-top>li:hover {
        background-color:#0af;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu4 .menu-top .menu-right {
        float:right
}
#menu4 .menu-button {
        display:block;
        line-height:40px;
        padding:0 20px;
        color:#d0d0d0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu4 li:hover .menu-button {
        color:#fafafa;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu4 .menu-drop {
        padding-right:15px
}
#menu4 .menu-drop .menu-label {
        padding-right:20px;
        background:url(../image/menu1-drop1.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu4 li:hover .menu-drop .menu-label {
        background:url(../image/menu4-drop2.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu4 .menu-dropdown {
        text-align:left;
        background-color:#0af;
        -webkit-border-radius:0 0 5px 5px;
        -moz-border-radius:0 0 5px 5px;
        -ms-border-radius:0 0 5px 5px;
        -o-border-radius:0 0 5px 5px;
        border-radius:0 0 5px 5px;
        position:absolute;
        left:-5000px;
        opacity:0;
        z-index:100
}
#menu4 li:hover .menu-dropdown {
        left:0;
        opacity:1;
        -webkit-transition:opacity .2s;
        -moz-transition:opacity .2s;
        -ms-transition:opacity .2s;
        -o-transition:opacity .2s;
        transition:opacity .2s
}
#menu4 .menu-right:hover .menu-dropdown {
        left:auto;
        right:0
}
#menu4 .menu-sub {
        margin:5px 0
}
#menu4 .menu-sub li {
        white-space:nowrap;
        -webkit-transition:background-color .1s;
        -moz-transition:background-color .1s;
        -ms-transition:background-color .1s;
        -o-transition:background-color .1s;
        transition:background-color .1s
}
#menu4 .menu-sub li:hover {
        background:#303030 url(../image/menu4-select.png) no-repeat 10px;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu4 .menu-subbutton {
        display:block;
        padding:7px 20px;
        line-height:1.3;
        color:#fafafa;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu4 .menu-sub li:hover .menu-subbutton {
        color:#e0e0e0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu4 .menu-desc {
        font-style:italic;
        color:#eaeaea;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu4 .menu-sub li:hover .menu-desc {
        color:#d0d0d0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu4 .menu-row {
        vertical-align:text-top;
        display:inline-block;
        zoom:1;
        *display:inline
}
#menu4 .menu-row .menu-sub {
        margin:0
}
#menu4 h1 {
        font-size:2em;
        color:#e0e0e0
}
#menu4 p {
        color:#f0f0f0
}
#menu4 .emp {
        font-weight:700
}
#menu4 .quote {
        font-style:italic
}
#menu4 .menu-dropdown3 {
        padding-top:5px;
        white-space:nowrap
}
#menu4 .menu-dropdown3 h1 {
        margin:0 0 5px 15px
}
#menu4 .menu-dropdown3 .menu-row {
        border-right:1px dotted #707070;
        margin:5px 0
}
#menu4 .menu-dropdown3 .menu-row:last-child {
        border-right:0
}
#menu4 .menu-dropdown4 {
        padding-top:5px;
        white-space:nowrap
}
#menu4 .menu-dropdown4 h1 {
        margin:0 0 5px 15px
}
#menu4 .menu-dropdown4 .menu-row div {
        border-right:1px dotted #707070;
        margin:5px 0 10px
}
#menu4 .menu-dropdown4 .menu-row:last-child div {
        border-right:0
}
#menu4 .menu-dropdown4 .menu-row div:last-child {
        margin-bottom:5px
}
#menu4 .menu-dropdown6 img {
        margin-right:5px;
        vertical-align:middle
}
#menu4 .menu-dropdown6 .menu-label {
        vertical-align:middle
}
#menu4 .menu-dropdown6 .menu-subbutton {
        padding:5px 20px
}
#menu4 .menu-dropdown7 {
        padding:10px;
        width:210px
}
#menu4 .menu-dropdown7 p {
        margin-top:7px
}
#menu4 .menu-dropdown7 h1 {
        color:#f0f0f0;
        padding-bottom:3px;
        border-bottom:1px solid #e0e0e0
}
#menu5 {
        font-family:Arial,sans-serif;
        font-size:12px;
        background-color:#fafafa;
        width:900px;
        height:40px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        padding:0 20px;
        display:block;
        line-height:1
}
#menu5 h1,#menu5 ul,#menu5 p,#menu5 img {
        margin:0;
        padding:0;
        border:0
}
#menu5 h1 {
        font-weight:400
}
#menu5 ul {
        list-style:none
}
#menu5 a {
        text-decoration:none;
        color:#5f5f5f
}
#menu5 .menu-label {
        font-weight:700;
        text-transform:uppercase
}
#menu5 .menu-top>li {
        float:left;
        position:relative;
        text-align:center;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu5 .menu-top>li:hover {
        background-color:#0af;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu5 .menu-top .menu-right {
        float:right
}
#menu5 .menu-button {
        display:block;
        line-height:40px;
        padding:0 20px;
        color:#5f5f5f;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu5 li:hover .menu-button {
        color:#fafafa;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu5 .menu-drop {
        padding-right:15px
}
#menu5 .menu-drop .menu-label {
        padding-right:20px;
        background:url(../image/menu1-drop1.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu5 li:hover .menu-drop .menu-label {
        background:url(../image/menu4-drop2.png) no-repeat right;
        -webkit-transition:background .2s;
        -moz-transition:background .2s;
        -ms-transition:background .2s;
        -o-transition:background .2s;
        transition:background .2s
}
#menu5 .menu-dropdown {
        text-align:left;
        background-color:#0af;
        -webkit-border-radius:0 0 5px 5px;
        -moz-border-radius:0 0 5px 5px;
        -ms-border-radius:0 0 5px 5px;
        -o-border-radius:0 0 5px 5px;
        border-radius:0 0 5px 5px;
        position:absolute;
        left:-5000px;
        opacity:0;
        z-index:100
}
#menu5 li:hover .menu-dropdown {
        left:0;
        opacity:1;
        -webkit-transition:opacity .2s;
        -moz-transition:opacity .2s;
        -ms-transition:opacity .2s;
        -o-transition:opacity .2s;
        transition:opacity .2s
}
#menu5 .menu-right:hover .menu-dropdown {
        left:auto;
        right:0
}
#menu5 .menu-sub {
        margin:5px 0
}
#menu5 .menu-sub li {
        white-space:nowrap;
        -webkit-transition:background-color .1s;
        -moz-transition:background-color .1s;
        -ms-transition:background-color .1s;
        -o-transition:background-color .1s;
        transition:background-color .1s
}
#menu5 .menu-sub li:hover {
        background:#fafafa url(../image/menu4-select.png) no-repeat 10px;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu5 .menu-subbutton {
        display:block;
        padding:7px 20px;
        line-height:1.3;
        color:#fafafa;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu5 .menu-sub li:hover .menu-subbutton {
        color:#5f5f5f;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu5 .menu-desc {
        font-style:italic;
        color:#eaeaea;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu5 .menu-sub li:hover .menu-desc {
        color:#707070;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu5 .menu-row {
        vertical-align:text-top;
        display:inline-block;
        zoom:1;
        *display:inline
}
#menu5 .menu-row .menu-sub {
        margin:0
}
#menu5 h1 {
        font-size:2em;
        color:#f0f0f0
}
#menu5 p {
        color:#f0f0f0
}
#menu5 .emp {
        font-weight:700
}
#menu5 .quote {
        font-style:italic
}
#menu5 .menu-dropdown3 {
        padding-top:5px;
        white-space:nowrap
}
#menu5 .menu-dropdown3 h1 {
        margin:0 0 5px 20px
}
#menu5 .menu-dropdown3 .menu-row {
        border-right:1px dotted #707070;
        margin:5px 0
}
#menu5 .menu-dropdown3 .menu-row:last-child {
        border-right:0
}
#menu5 .menu-dropdown4 {
        padding-top:5px;
        white-space:nowrap
}
#menu5 .menu-dropdown4 h1 {
        margin:0 0 5px 20px
}
#menu5 .menu-dropdown4 .menu-row div {
        border-right:1px dotted #707070;
        margin:5px 0 10px
}
#menu5 .menu-dropdown4 .menu-row:last-child div {
        border-right:0
}
#menu5 .menu-dropdown4 .menu-row div:last-child {
        margin-bottom:5px
}
#menu5 .menu-dropdown6 img {
        margin-right:5px;
        vertical-align:middle
}
#menu5 .menu-dropdown6 .menu-label {
        vertical-align:middle
}
#menu5 .menu-dropdown6 .menu-subbutton {
        padding:5px 20px
}
#menu5 .menu-dropdown7 {
        padding:10px;
        width:210px
}
#menu5 .menu-dropdown7 p {
        margin-top:7px
}
#menu5 .menu-dropdown7 h1 {
        color:#f0f0f0;
        padding-bottom:3px;
        border-bottom:1px solid #e0e0e0
}
#menu6 {
        font-family:Arial,sans-serif;
        font-size:12px;
        background-color:#303030;
        width:900px;
        height:40px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        padding:0 20px;
        display:block;
        line-height:1
}
#menu6 h1,#menu6 ul,#menu6 p,#menu6 img {
        margin:0;
        padding:0;
        border:0
}
#menu6 h1 {
        font-weight:400
}
#menu6 ul {
        list-style:none
}
#menu6 a {
        text-decoration:none;
        color:#fafafa
}
#menu6 .menu-label {
        font-weight:700;
        text-transform:uppercase
}
#menu6 .menu-top>li {
        float:left;
        position:relative;
        text-align:center;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu6 .menu-top>li:hover {
        background-color:#f52;
        -webkit-transition:background-color .2s;
        -moz-transition:background-color .2s;
        -ms-transition:background-color .2s;
        -o-transition:background-color .2s;
        transition:background-color .2s
}
#menu6 .menu-top .menu-right {
        float:right
}
#menu6 .menu-button {
        display:block;
        line-height:40px;
        padding:0 20px;
        color:#d0d0d0;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu6 li:hover .menu-button {
        color:#fafafa;
        -webkit-transition:color .2s;
        -moz-transition:color .2s;
        -ms-transition:color .2s;
        -o-transition:color .2s;
        transition:color .2s
}
#menu6 .menu-drop {
        padding-right:15px
}
#menu6 .menu-drop .menu-label {
        padding-right:20px;
        background:url(../image/menu1-drop1.png) no-repeat right;
        -webkit-transition:background .2s;
        -m.........完整代码请登录后点击上方下载按钮下载查看