简约蓝色系导航三级导航

效果图

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可以去网上下载

图片素材如下

 

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...