效果图
index.html
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"title>index</link rel="stylesheet" href="css/style.css"> body<!-- 导航nav --> ul class="menu boxed clearfix"li><a href="#"i ="menu-icon menu-icon-1"></i>Homea="menu-icon menu-icon-2">Tickets> 二级导航 --> ul> >Air Tickets>Train Tickets>Ship Tickets="menu-icon menu-icon-3">Services>Service 1>Service 2>Service 3="menu-icon menu-icon-4">Reservations--> >5 Stars Hotel> 三级导航 --> > >5- Single Room>5- Double Room>5- Triple Room>4 Stars Hotel>4- Single Room>4- Double Room>4- Triple Room>3 Stars Hotel>3- Single Room>3- Double Room>3- Triple Room="menu-icon menu-icon-5">Restaurant="menu-icon menu-icon-6">Contact Us> script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'script="js/jquery-ui.min.js"html>
style.css
@import "http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding: border: font-size:100%; font:inherit; vertical-align:baseline } article,section { display:block } body { line-height:1 } ol,ul { list-style:none } blockquote,q { quotes: blockquote:before,blockquote:after,q:before,q:after { content:''; table { border-collapse:collapse; border-spacing:0 } html { -webkit-text-size-adjust: -ms-text-size-adjust: -webkit-font-smoothing:subpixel-antialiased } font-family:pt sans,sans-serif;13px; font-weight:400; color:#4f5d6e; position:relative } ::selection { background:#1c588f;#fff; text-shadow: a {0 0; text-decoration: a:hover,a:focus {#c9376e!important; a:active { background-color:transparent } input,textarea,input[type=submit]:focus,div { outline:none; button,input,select,textarea {top; h1,h6 {700;1.2em; margin-bottom:.7em } h1 {29px } h2 {25px } h3 {23px } h4 {19px } h5 {17px } h6 {14px } i {relative; top: left:inline-block; overflow:hidden; font-style:normal; background-repeat:no-repeat; margin-right:15px } .clearfix:before,.clearfix:after {table;" " } .clearfix:after { clear:both } .boxed { -webkit-box-shadow:5px 5px 5px rgba(0,.2); box-shadow:30px; .boxed-blue {#1c588f } .boxed-dark {#142439 } .boxed-light {#e5eff6 } .boxed.red-line { border-top:4px solid #c9376e } .boxed.green-line {4px solid #9cd70e } .boxed.blue-line {4px solid #4bb4e8 } .menu {#398fc7; z-index:1000 } .ie8 .menu { filter:#398fc7 } .menu a:hover,.menu a.hover {#fff!important } .menu li { .menu>li { float:left; width:16.666666666666664%;3px solid #4bb4e8 } .menu>li:hover,.menu>li.hover { border-top-color:#9cd70e; .menu>li>a {block;15px; text-align:center; text-transform:uppercase;18px;15px 5px;0 1px 1px rgba(45,118,158,.5);2px solid #3484bd; border-left:1px solid #4b9cce; border-right:1px solid #1e86b5; white-space:nowrap; text-overflow:ellipsis } .menu>li:first-child>a { border-left-color: .menu>li:last-child>a { border-right-color: .menu>li:hover>a,.menu>li.hover>a {#52b1dd;2px solid #4aa3d2;0 2px 4px rgba(21,80,94,.75); .menu-icon { height:0 auto 13px;url(../images/menu-icons.png) 0 0 no-repeat } @media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi) { .menu-icon { background-image:url(../images/menu-icons-x2.png); background-size:60px auto } }.menu-icon-2 { background-position:0 -30px } .menu-icon-3 {0 -60px } .menu-icon-4 {0 -90px } .menu-icon-5 {0 -120px } .menu-icon-6 {0 -150px } .menu-icon-7 {0 -180px } .menu-icon-8 {0 -210px } .menu-icon-9 {0 -240px } .menu>li:hover>a .menu-icon,.menu>li.hover>a .menu-icon {-30px 0 } .menu>li:hover>a .menu-icon-2,.menu>li.hover>a .menu-icon-2 {-30px -30px } .menu>li:hover>a .menu-icon-3,.menu>li.hover>a .menu-icon-3 {-30px -60px } .menu>li:hover>a .menu-icon-4,.menu>li.hover>a .menu-icon-4 {-30px -90px } .menu>li:hover>a .menu-icon-5,.menu>li.hover>a .menu-icon-5 {-30px -120px } .menu>li:hover>a .menu-icon-6,.menu>li.hover>a .menu-icon-6 {-30px -150px } .menu>li:hover>a .menu-icon-7,.menu>li.hover>a .menu-icon-7 {-30px -180px } .menu>li:hover>a .menu-icon-8,.menu>li.hover>a .menu-icon-8 {-30px -210px } .menu>li:hover>a .menu-icon-9,.menu>li.hover>a .menu-icon-9 {-30px -240px } .menu ul {absolute;-9999px;9499; min-width:100px } .menu>li:hover>ul,.menu>li.hover>ul {93px; .menu ul li a {1px solid transparent; border-bottom:16px;20px 5px } .menu ul li:first-child>a { .menu ul li:last-child>a { .menu ul li:hover>a,.menu ul li.hover>a { border-color:#408aaf } .menu ul li:hover:before,.menu ul li.hover:before { bottom:3px;#c9376e } .menu ul li:hover>ul,.menu ul li.hover>ul {1px;101%; padding-left:1% } .menu.style2 ul { .menu.style2 { .menu.style2>li {3px solid #4bb4e8; .menu.style2>li:hover,.menu.style2>li.hover { border-bottom-color: .menu.style2>li>a {18px 5px 16px 0;1px solid #062d52;inset 1px 0 0 rgba(255,.08); .menu.style2>li:last-child>a {1px } .menu.style2>li:hover>a,.menu.style2>li.hover>a {0 0 } .menu.style2 .menu-icon {0 3px 3px 0;middle }
jquery-ui.min.js可以去网上下载
图片素材如下