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;
-moz-transition:background .2s;
-ms-transition:background .2s;
-o-transition:background .2s;
transition:background .2s
}
#menu6 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
}
#menu6 .menu-dropdown {
text-align:left;
background-color:#f52;
-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
}
#menu6 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
}
#menu6 .menu-right:hover .menu-dropdown {
left:auto;
right:0
}
#menu6 .menu-sub {
margin:5px 0
}
#menu6 .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
}
#menu6 .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
}
#menu6 .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
}
#menu6 .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
}
#menu6 .menu-desc {
font-style:italic;
color:#e0e0e0;
-webkit-transition:color .2s;
-moz-transition:color .2s;
-ms-transition:color .2s;
-o-transition:color .2s;
transition:color .2s
}
#menu6 .menu-sub li:hover .menu-desc {
color:#f0f0f0;
-webkit-transition:color .2s;
-moz-transition:color .2s;
-ms-transition:color .2s;
-o-transition:color .2s;
transition:color .2s
}
#menu6 .menu-row {
vertical-align:text-top;
display:inline-block;
zoom:1;
*display:inline
}
#menu6 .menu-row .menu-sub {
margin:0
}
#menu6 h1 {
font-size:2em;
color:#e0e0e0
}
#menu6 p {
color:#f0f0f0
}
#menu6 .emp {
font-weight:700
}
#menu6 .quote {
font-style:italic
}
#menu6 .menu-dropdown3 {
padding-top:5px;
white-space:nowrap
}
#menu6 .menu-dropdown3 h1 {
margin:0 0 5px 20px
}
#menu6 .menu-dropdown3 .menu-row {
border-right:1px dotted #707070;
margin:5px 0
}
#menu6 .menu-dropdown3 .menu-row:last-child {
border-right:0
}
#menu6 .menu-dropdown4 {
padding-top:5px;
white-space:nowrap
}
#menu6 .menu-dropdown4 h1 {
margin:0 0 5px 20px
}
#menu6 .menu-dropdown4 .menu-row div {
border-right:1px dotted #707070;
margin:5px 0 10px
}
#menu6 .menu-dropdown4 .menu-row:last-child div {
border-right:0
}
#menu6 .menu-dropdown4 .menu-row div:last-child {
margin-bottom:5px
}
#menu6 .menu-dropdown6 img {
margin-right:5px;
vertical-align:middle
}
#menu6 .menu-dropdown6 .menu-label {
vertical-align:middle
}
#menu6 .menu-dropdown6 .menu-subbutton {
padding:5px 20px
}
#menu6 .menu-dropdown7 {
padding:10px;
width:210px
}
#menu6 .menu-dropdown7 p {
margin-top:7px
}
#menu6 .menu-dropdown7 h1 {
color:#f0f0f0;
padding-bottom:3px;
border-bottom:1px solid #d0d0d0
}
#menu7 {
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
}
#menu7 h1,#menu7 ul,#menu7 p,#menu7 img {
margin:0;
padding:0;
border:0
}
#menu7 h1 {
font-weight:400
}
#menu7 ul {
list-style:none
}
#menu7 a {
text-decoration:none;
color:#5f5f5f
}
#menu7 .menu-label {
font-weight:700;
text-transform:uppercase
}
#menu7 .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
}
#menu7 .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
}
#menu7 .menu-top .menu-right {
float:right
}
#menu7 .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
}
#menu7 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
}
#menu7 .menu-drop {
padding-right:15px
}
#menu7 .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
}
#menu7 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
}
#menu7 .menu-dropdown {
text-align:left;
background-color:#f52;
-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
}
#menu7 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
}
#menu7 .menu-right:hover .menu-dropdown {
left:auto;
right:0
}
#menu7 .menu-sub {
margin:5px 0
}
#menu7 .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
}
#menu7 .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
}
#menu7 .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
}
#menu7 .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
}
#menu7 .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
}
#menu7 .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
}
#menu7 .menu-row {
vertical-align:text-top;
display:inline-block;
zoom:1;
*display:inline
}
#menu7 .menu-row .menu-sub {
margin:0
}
#menu7 h1 {
font-size:2em;
color:#f0f0f0
}
#menu7 p {
color:#f0f0f0
}
#menu7 .emp {
font-weight:700
}
#menu7 .quote {
font-style:italic
}
#menu7 .menu-dropdown3 {
padding-top:5px;
white-space:nowrap
}
#menu7 .menu-dropdown3 h1 {
margin:0 0 5px 20px
}
#menu7 .menu-dropdown3 .menu-row {
border-right:1px dotted #707070;
margin:5px 0
}
#menu7 .menu-dropdown3 .menu-row:last-child {
border-right:0
}
#menu7 .menu-dropdown4 {
padding-top:5px;
white-space:nowrap
}
#menu7 .menu-dropdown4 h1 {
margin:0 0 5px 20px
}
#menu7 .menu-dropdown4 .menu-row div {
border-right:1px dotted #707070;
margin:5px 0 10px
}
#menu7 .menu-dropdown4 .menu-row:last-child div {
border-right:0
}
#menu7 .menu-dropdown4 .menu-row div:last-child {
margin-bottom:5px
}
#menu7 .menu-dropdown6 img {
margin-right:5px;
vertical-align:middle
}
#menu7 .menu-dropdown6 .menu-label {
vertical-align:middle
}
#menu7 .menu-dropdown6 .menu-subbutton {
padding:5px 20px
}
#menu7 .menu-dropdown7 {
padding:10px;
width:210px
}
#menu7 .menu-dropdown7 p {
margin-top:7px
}
#menu7 .menu-dropdown7 h1 {
color:#f0f0f0;
padding-bottom:3px;
border-bottom:1px solid #d0d0d0
}
#menu8 {
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
}
#menu8 h1,#menu8 ul,#menu8 p,#menu8 img {
margin:0;
padding:0;
border:0
}
#menu8 h1 {
font-weight:400
}
#menu8 ul {
list-style:none
}
#menu8 a {
text-decoration:none;
color:#404040
}
#menu8 .menu-label {
font-weight:700;
text-transform:uppercase
}
#menu8 .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
}
#menu8 .menu-top>li:hover {
background-color:#2f0;
-webkit-transition:background-color .2s;
-moz-transition:background-color .2s;
-ms-transition:background-color .2s;
-o-transition:background-color .2s;
transition:background-color .2s
}
#menu8 .menu-top .menu-right {
float:right
}
#menu8 .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
}
#menu8 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
}
#menu8 .menu-drop {
padding-right:15px
}
#menu8 .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
}
#menu8 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
}
#menu8 .menu-dropdown {
text-align:left;
background-color:#2f0;
-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
}
#menu8 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
}
#menu8 .menu-right:hover .menu-dropdown {
left:auto;
right:0
}
#menu8 .menu-sub {
margin:5px 0
}
#menu8 .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
}
#menu8 .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
}
#menu8 .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
}
#menu8 .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
}
#menu8 .menu-desc {
font-style:italic;
color:#505050;
-webkit-transition:color .2s;
-moz-transition:color .2s;
-ms-transition:color .2s;
-o-transition:color .2s;
transition:color .2s
}
#menu8 .menu-sub li:hover .menu-desc {
color:#f0f0f0;
-webkit-transition:color .2s;
-moz-transition:color .2s;
-ms-transition:color .2s;
-o-transition:color .2s;
transition:color .2s
}
#menu8 .menu-row {
vertical-align:text-top;
display:inline-block;
zoom:1;
*display:inline
}
#menu8 .menu-row .menu-sub {
margin:0
}
#menu8 h1 {
font-size:2em;
color:#505050
}
#menu8 p {
color:#404040
}
#menu8 .emp {
font-weight:700
}
#menu8 .quote {
font-style:italic
}
#menu8 .menu-dropdown3 {
padding-top:5px;
white-space:nowrap
}
#menu8 .menu-dropdown3 h1 {
margin:0 0 5px 20px
}
#menu8 .menu-dropdown3 .menu-row {
border-right:1px dotted #707070;
margin:5px 0
}
#menu8 .menu-dropdown3 .menu-row:last-child {
border-right:0
}
#menu8 .menu-dropdown4 {
padding-top:5px;
white-space:nowrap
}
#menu8 .menu-dropdown4 h1 {
margin:0 0 5px 20px
}
#menu8 .menu-dropdown4 .menu-row div {
border-right:1px dotted #707070;
margin:5px 0 10px
}
#menu8 .menu-dropdown4 .menu-row:last-child div {
border-right:0
}
#menu8 .menu-dropdown4 .menu-row div:last-child {
margin-bottom:5px
}
#menu8 .menu-dropdown6 img {
margin-right:5px;
vertical-align:middle
}
#menu8 .menu-dropdown6 .menu-label {
vertical-align:middle
}
#menu8 .menu-dropdown6 .menu-subbutton {
padding:5px 20px
}
#menu8 .menu-dropdown7 {
padding:10px;
width:210px
}
#menu8 .menu-dropdown7 p {
margin-top:7px
}
#menu8 .menu-dropdown7 h1 {
color:#404040;
padding-bottom:3px;
border-bottom:1px solid #505050
}
</style>
</head>
<body>
<h1>Theme 1</h1>
<div id="menu1">
<ul class="menu-top">
<li><a href="#" class="menu-button"><span class="menu-label">Home</span></a></li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">About</span></a>
<div class="menu-dropdown menu-dropdown1">
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Who We Are</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">What We Do</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Our Goals</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Our Awards</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Our Team</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Services</span></a>
<div class="menu-dropdown menu-dropdown2">
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Web Design</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Programming</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Advertising</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Marketing</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">E-commerce</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
</ul>
</div>
</li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Portfolio</span></a>
<div class="menu-dropdown menu-dropdown3">
<div class="menu-row">
<h1>HTML</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pellentesq</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Et rhoncus</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Ligula eget</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Turpis quis</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Vivamus ut</span></a></li>
</ul>
</div>
<div class="menu-row">
<h1>Flash</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Commodo</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pulvinar</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Curabitur</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Aliquam</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Vulputate</span></a></li>
</ul>
</div>
<div class="menu-row">
<h1>Mobile</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Lorem ipsum</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Dolor amet</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Consectetur</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Adipiscing</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Duis ut nibh</span></a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Clients</span></a>
<div class="menu-dropdown menu-dropdown4">
<div class="menu-row">
<div>
<h1>America</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Lorem ipsum</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Dolor amet</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Consectetur</span></a></li>
</ul>
</div>
<div>
<h1>Africa</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pulvinar in</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Consectet</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Aliquam eu</span></a></li>
</ul>
</div>
</div>
<div class="menu-row">
<div>
<h1>Europe</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pellentesq</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Et rhoncus</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Ligula eget</span></a></li>
</ul>
</div>
<div>
<h1>Asia</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Turpis quis</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Vivamus ut</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Commodo</span></a></li>
</ul>
</div>
</div>
</div>
</li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Contact</span></a>
<div class="menu-dropdown menu-dropdown5">
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pellente</span><span
class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Et rhonc</span><span
class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Ligulaeg</span><span
class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Turpisqu</span><span
class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Vivamus</span><span
class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Doloram</span><span
class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Consect</span><span
class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Loremipe</span><span
class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
</ul>
</div>
</li>
<li class="menu-right"><a href="#" class="menu-button menu-drop"><span class="menu-label">Info</span></a>
<div class="menu-dropdown menu-dropdown7">
<h1>Quick Info</h1>
<p><span class="emp">Lorem ipsum dolor</span> sit amet, optiones congue adipiscing elit, sed diam exp nonummy nibh euismod tincidunt utd.
<p>
<p class="quote">Laoreet dolore magna aliquam erates volutpat. Ut wisi enim ad eleifend exp minim veniam, quis. u feugiat nulla.</p>
<p><span class="emp">Facilisis at vero</span> eros et accumsan et iusto nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea.</p>
<p class="quote">Commodo consequat duis autem vel eum iriure dolor in hendrerit in nu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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