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 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