效果图
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 导航nav -->
<ul class="menu boxed clearfix">
<li><a href="#"><i class="menu-icon menu-icon-1"></i>home</a></li>
<li><a href="#"><i class="menu-icon menu-icon-2"></i>tickets</a>
<!-- 二级导航 -->
<ul>
<li><a href="#">air tickets</a></li>
<li><a href="#">train tickets</a></li>
<li><a href="#">ship tickets</a></li>
</ul>
</li>
<li><a href="#"><i class="menu-icon menu-icon-3"></i>services</a>
<ul>
<li><a href="#">service 1</a></li>
<li><a href="#">service 2</a></li>
<li><a href="#">service 3</a></li>
</ul>
</li>
<li><a href="#"><i class="menu-icon menu-icon-4"></i>reservations</a>
<ul>
<!-- 二级导航 -->
<li><a href="#">5 stars hotel</a>
<!-- 三级导航 -->
<ul>
<li><a href="#">5- single room</a></li>
<li><a href="#">5- double room</a></li>
<li><a href="#">5- triple room</a></li>
</ul>
</li>
<li><a href="#">4 stars hotel</a>
<ul>
<li><a href="#">4- single room</a></li>
<li><a href="#">4- double room</a></li>
<li><a href="#">4- triple room</a></li>
</ul>
</li>
<li><a href="#">3 stars hotel</a>
<ul>
<li><a href="#">3- single room</a></li>
<li><a href="#">3- double room</a></li>
<li><a href="#">3- triple room</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="menu-icon menu-icon-5"></i>restaurant</a></li>
<li><a href="#"><i class="menu-icon menu-icon-6"></i>contact us</a></li>
</ul>
<script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
</body>
</html>
style.css
@import "http://fonts.lug.ustc.edu.cn/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:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}
body {
line-height:1
}
ol,ul {
list-style:none
}
blockquote,q {
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none
}
table {
border-collapse:collapse;
border-spacing:0
}
html {
font-size:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing:subpixel-antialiased
}
body {
font-family:pt sans,sans-serif;
font-size:13px;
font-weight:400;
color:#4f5d6e;
position:relative
}
::selection {
background:#1c588f;
color:#fff;
text-shadow:none
}
a {
color:#1c588f;
background:0 0;
text-decoration:none
}
a:hover,a:focus {
color:#c9376e!important;
text-decoration:none
}
a:active {
background-color:transparent
}
input,textarea,input[type=submit]:focus,div {
outline:none;
font-family:pt sans,sans-serif
}
button,input,select,textarea {
vertical-align:top;
margin:0
}
h1,h2,h3,h4,h5,h6 {
color:#1c588f;
font-weight:700;
line-height:1.2em;
margin-bottom:.7em
}
h1 {
font-size:29px
}
h2 {
font-size:25px
}
h3 {
font-size:23px
}
h4 {
font-size:19px
}
h5 {
font-size:17px
}
h6 {
font-size:14px
}
i {
position:relative;
top:0;
left:0;
display:inline-block;
overflow:hidden;
text-decoration:none;
font-style:normal;
background-repeat:no-repeat;
margin-right:15px
}
.clearfix:before,.clearfix:after {
display:table;
content:" "
}
.clearfix:after {
clear:both
}
.boxed {
background:#fff;
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,.2);
box-shadow:5px 5px 5px rgba(0,0,0,.2);
margin-bottom:30px;
position:relative
}
.boxed-blue {
background:#1c588f
}
.boxed-dark {
background:#142439
}
.boxed-light {
background:#e5eff6
}
.boxed.red-line {
border-top:4px solid #c9376e
}
.boxed.green-line {
border-top:4px solid #9cd70e
}
.boxed.blue-line {
border-top:4px solid #4bb4e8
}
.menu {
background:#398fc7;
z-index:1000
}
.ie8 .menu {
filter:none;
background:#398fc7
}
.menu a:hover,.menu a.hover {
color:#fff!important
}
.menu li {
position:relative
}
.menu>li {
float:left;
width:16.666666666666664%;
border-top:3px solid #4bb4e8
}
.menu>li:hover,.menu>li.hover {
border-top-color:#9cd70e;
z-index:1
}
.menu>li>a {
display:block;
font-size:15px;
font-weight:700;
color:#fff;
text-align:center;
text-transform:uppercase;
line-height:18px;
padding:15px 5px;
text-shadow:0 1px 1px rgba(45,118,158,.5);
border-top:2px solid #3484bd;
border-left:1px solid #4b9cce;
border-right:1px solid #1e86b5;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.menu>li:first-child>a {
border-left-color:transparent
}
.menu>li:last-child>a {
border-right-color:transparent
}
.menu>li:hover>a,.menu>li.hover>a {
background:#52b1dd;
border:none;
border-top:2px solid #4aa3d2;
-webkit-box-shadow:0 2px 4px rgba(21,80,94,.75);
box-shadow:0 2px 4px rgba(21,80,94,.75)
}
.menu-icon {
display:block;
width:30px;
height:30px;
margin:0 auto 13px;
background: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 {
background-position:0 -60px
}
.menu-icon-4 {
background-position:0 -90px
}
.menu-icon-5 {
background-position:0 -120px
}
.menu-icon-6 {
background-position:0 -150px
}
.menu-icon-7 {
background-position:0 -180px
}
.menu-icon-8 {
background-position:0 -210px
}
.menu-icon-9 {
background-position:0 -240px
}
.menu>li:hover>a .menu-icon,.menu>li.hover>a .menu-icon {
background-position:-30px 0
}
.menu>li:hover>a .menu-icon-2,.menu>li.hover>a .menu-icon-2 {
background-position:-30px -30px
}
.menu>li:hover>a .menu-icon-3,.menu>li.hover>a .menu-icon-3 {
background-position:-30px -60px
}
.menu>li:hover>a .menu-icon-4,.menu>li.hover>a .menu-icon-4 {
background-position:-30px -90px
}
.menu>li:hover>a .menu-icon-5,.menu>li.hover>a .menu-icon-5 {
background-position:-30px -120px
}
.menu>li:hover>a .menu-icon-6,.menu>li.hover>a .menu-icon-6 {
background-position:-30px -150px
}
.menu>li:hover>a .menu-icon-7,.menu>li.hover>a .menu-icon-7 {
background-position:-30px -180px
}
.menu>li:hover>a .menu-icon-8,.menu>li.hover>a .menu-icon-8 {
background-position:-30px -210px
}
.menu>li:hover>a .menu-icon-9,.menu>li.hover>a .menu-icon-9 {
background-position:-30px -240px
}
.menu ul {
position:absolute;
top:-9999px;
left:-9999px;
z-index:9499;
width:100%;
min-width:100px
}
.menu>li:hover>ul,.menu>li.hover>ul {
top:93px;
left:0
}
.menu ul li a {
display:block;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
background:#398fc7;
font-size:13px;
font-weight:700;
color:#fff;
text-align:center;
text-transform:uppercase;
line-height:16px;
padding:20px 5px
}
.menu ul li:first-child>a {
border-top:none
}
.menu ul li:last-child>a {
border-bottom:none
}
.menu ul li:hover>a,.menu ul li.hover>a {
background:#52b1dd;
border-color:#408aaf
}
.menu ul li:hover:before,.menu ul li.hover:before {
content:'';
position:absolute;
top:0;
left:0;
bottom:0;
width:3px;
background:#c9376e
}
.menu ul li:hover>ul,.menu ul li.hover>ul {
position:absolute;
top:1px;
left:100%;
width:101%;
padding-left:1%
}
.menu.style2 ul {
display:none
}
.menu.style2 {
background:0 0;
-webkit-box-shadow:none;
box-shadow:none
}
.menu.style2>li {
border-top:3px solid #4bb4e8;
border-bottom:3px solid #4bb4e8
}
.menu.style2>li:hover,.menu.style2>li.hover {
border-top-color:#9cd70e;
border-bottom-color:#9cd70e;
z-index:1
}
.menu.style2>li>a {
padding:18px 5px 16px 0;
border:none;
border-left:1px solid #062d52;
-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.08);
box-shadow:inset 1px 0 0 rgba(255,255,255,.08)
}
.menu.style2>li:last-child>a {
border-right:1px solid #062d52;
box-shadow:inset 1px 0 0 rgba(255,255,255,.08),1px 0 0 rgba(255,255,255,.08);
margin-right:1px
}
.menu.style2>li:hover>a,.menu.style2>li.hover>a {
background:0 0
}
.menu.style2 .menu-icon {
display:inline-block;
margin:0 3px 3px 0;
vertical-align:middle
}
jquery-ui.min.js可以去网上下载
图片素材如下
