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

代码语言:html

所属分类:菜单导航

代码描述:css实现8款不同主题的顶部下拉导航菜单效果代码

代码标签: css 下拉 导航 菜单

下面为部分代码预览,完整代码请点击下载或在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 nulla vulputate velit esse consequat erates.</p>
                            <p><span class="emp">Vel illum dolore</span> e odio dignissim quie blandit praesent luptatum zzril delenis augue duis.</p>
                </div>
            </li>
            <li class="menu-right"><a href="#" class="menu-button menu-drop"><span class="menu-label">Social</span></a>
                <div class="menu-dropdown menu-dropdown6">
                    <ul class="menu-sub">
                        <li>
                            <a href="#" class="menu-subbutton"><img src="static/picture/facebook.png"><span class="menu-label">Facebook</span></a>
                        </li>
                        <li>
                            <a href="#" class="menu-subbutton"><img src="static/picture/twitter.png"><span class="menu-label">Twitter</span></a>
                        </li>
                        <li>
                            <a href="#" class="menu-subbutton"><img src="static/picture/googleplus.png"><span class="menu-label">Google+</span></a>
                        </li>
                        <li>
                            <a href="#" class="menu-subbutton"><img src="static/picture/linkedin.png"><span class="menu-label">LinkedIn</span></a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <h1>Theme 2</h1>
    <div id="menu2">
        <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 nulla vulputate velit esse consequat erates.</p>
                            <p><span class="emp">Vel illum dolore</span> e odio dignissim quie blandit praesent luptatum zzril delenis augue duis.</p>
                </div>
            </li>
            <li class="menu-right"><a href="#" class="menu-button menu-drop"><span class="menu-label">Social</span></a>
                <div class="menu-dropdown menu-dropdown6">
                    <ul class="menu-sub">
                        <li>
                            <a href="#" class="menu-subbutton"><img src="static/picture/facebook.png"><span class="menu-label">Facebook</span></a>
                        </li>
                        <li>
                            <a href="#" class="menu-subbutton"><img src="static/picture/twitter.png"><span class="menu-label">Twitter</span></a>
                        </li>
                        <li>
                            <a href="#" class="menu-subbutton"><img src="static/picture/googleplus.png"><span class="menu-label">Google+</span></a>
                        </li>
                        <li>
                            <a href="#" class="menu-subbutton"><img src="static/picture/linkedin.png"><span class="menu-label">LinkedIn</span></a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <h1>Theme 3</h1>
    <div id="menu3">
        <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&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0