zoukankan html css js c++ java

简约蓝色系导航（三级导航）

效果图

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

图片素材如下

查看全文

相关阅读:
tp5.带标签的缓存创建和清除测试
 web消息推送-goesay
链接生成二维码-PHP
微信退款
 tp5 日志文件名称问题
 PHP 获取访问来源
 PHP苹果内购二次验证的那些巨坑
 Linux 按时间批量删除文件命令（删除N天前文件）
利用WkHtmlToPdf，把H5 转成PDF
phpstorm2018永久激活方法---安装包激活

原文地址：https://www.cnblogs.com/chenyingying0/p/12841683.html