css实现8款不同主题的顶部下拉导航菜单效果代码
代码语言：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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0