导航栏,可直接使用

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            background: #ededed;

        }

        .relative {

            position: relative;

        }

        .absolute {

            position: absolute;

        }

        .hide {

            display: none;

        }

        .container {

            max-width: 1200px;

            margin: 50px auto;

        }

        .navigation-title {

            width: 212px;

            height: 46px;

            background: #B1191A; /*border-left:1px solid #B1191A;*/

        }

            .navigation-title a {

                display: block;

                background: #B1191A;

                line-height: 46px;

                color: white;

                font: 400 15px/44px "microsoft yahei";

                margin: 0 10px;

                text-decoration: none;

            }

        .navigation-container {

            width: 212px;

            list-style: none;

            background: #0088e3 !important; /*border-left:1px solid #0088e3;border-bottom:1px solid #0088e3;*/

        }

            .navigation-container .navigation-item {

                height: 31px;

                line-height: 30px;

                color: white;

                position: relative;

                transition: background .3s;

                -moz-transition: background .3s;

                -webkit-transition: background .3s;

                -o-transition: background .3s;

            }

                .navigation-container .navigation-item:hover {

                    background: white;box-shadow:0 0 8px 0;

                }

                    .navigation-container .navigation-item:hover .child-navigation-container {

                        display: block;box-shadow:0 0 8px 0;

                    }

                    .navigation-container .navigation-item:hover > a {

                        color: #c81623;

                    }

                .navigation-container .navigation-item > a {

                    color: white;

                    font-size: 14px;

                    margin: 0 10px;

                    font-family: "microsoft yahei";

                    text-decoration: none;

                }

                    .navigation-container .navigation-item > a:hover {

                        text-decoration: underline;

                    }

                .navigation-container .navigation-item i {

                    position: absolute;

                    z-index: 1;

                    top: 9px;

                    right: 14px;

                    width: 4px;

                    height: 14px;

                    font: 400 9px/14px consolas;

                }

        .child-navigation-container {

            position: absolute;

            left: 212px;

            top: 0;

            width: 212px;

            background: white; /*outline: 1px solid #0088e3;*/

            overflow: hidden;

            display: none;

        }

            .child-navigation-container li {

                transition: background .3s;

                -moz-transition: background .3s;

                -webkit-transition: background .3s;

                -o-transition: background .3s;

            }

                .child-navigation-container li > a {

                    color: #0088e3;

                    font-size: 14px;

                    margin: 0 10px;

                    font-family: "microsoft yahei";

                    text-decoration: none;

                }

                .child-navigation-container li:hover {

                    background: white;

                }

                    .child-navigation-container li:hover > a {

                        color: #c81623;

                    }

        .s2-child-navigation-container {

            width: 212px;

            position: absolute;

            background: #0088e3;

            top: 0;

        }

        .s2-navigation-container {

            position: absolute;

            left: 212px;

            top: 0;

            width: 212px;

            background: white; /*outline: 1px solid #0088e3;*/

            overflow: hidden;

            min-height: 465px;

        }

            .s2-navigation-container .s2-navigation-item {

                height: 31px;

                line-height: 31px;

                transition: background .3s;

                -moz-transition: background .3s;

                -webkit-transition: background .3s;

                -o-transition: background .3s;

            }

                .s2-navigation-container .s2-navigation-item > a {

                    color: #0088e3;

                    font-size: 14px;

                    margin: 0 10px;

                    font-family: "microsoft yahei";

                    text-decoration: none;

                }

                .s2-navigation-container .s2-navigation-item:hover {

                    background: white;

                }

                    .s2-navigation-container .s2-navigation-item:hover > a {

                        color: #c81623;

                    }

    </style>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>

        $(function () {

            $(".s2-item").hover(function () {

                var $this = $(this);

                var childid = $this.attr("child");

                var child = $("#" + childid);

                child.show();

            }, function () {

                var $this = $(this);

                var childid = $this.attr("child");

                var child = $("#" + childid);

                child.hide();

            });

            $(".s2-navigation-container").hover(function () {

                var $this = $(this);

                $this.show();

            }, function () {

                var $this = $(this);

                $this.hide();

            });

        });

    </script>

</head>

<body>

    <div class="container">

        <div class="navigation-title"><a href="#">全部商品分类</a></div>

        <ul class="navigation-container">

            <li class="navigation-item"><a href="#">家用电器</a><i>></i></li>

            <li class="navigation-item"><a href="#">手机、数码、通信设备</a><i>></i></li>

            <li class="navigation-item"><a href="#">电脑、办公</a><i>></i></li>

            <li class="navigation-item"><a href="#">家居、家具、家装、厨具</a><i>></i></li>

            <li class="navigation-item"><a href="#">男装、女装、珠宝</a><i>></i></li>

            <li class="navigation-item"><a href="#">个护化妆、清洁用品</a><i>></i></li>

            <li class="navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a><i>></i></li>

            <li class="navigation-item"><a href="#">运动户外</a><i>></i></li>

            <li class="navigation-item"><a href="#">汽车、汽车用品</a><i>></i></li>

            <li class="navigation-item"><a href="#">母婴、玩具乐器</a><i>></i></li>

            <li class="navigation-item"><a href="#">食品、酒类、生鲜、特产</a><i>></i></li>

            <li class="navigation-item"><a href="#">图书、音像、电子书</a><i>></i></li>

            <li class="navigation-item"><a href="#">彩票、旅行、充值、票务</a><i>></i></li>

            <li class="navigation-item"><a href="#">理财、众筹、白条、保险</a><i>></i></li>

            <li class="navigation-item"><a href="#">营养保健</a><i>></i></li>

        </ul>

    </div>

    <div class="container">

        <div class="navigation-title"><a href="#">全部商品分类</a></div>

        <ul class="navigation-container">

            <li class="navigation-item">

                <a href="#">家用电器</a><i>></i>

                <ul class="child-navigation-container">

                    <li><a href="#">家用电器</a></li>

                    <li><a href="#">手机、数码、通信设备</a></li>

                    <li><a href="#">电脑、办公</a></li>

                    <li><a href="#">家居、家具、家装、厨具</a></li>

                </ul>

            </li>

            <li class="navigation-item">

                <a href="#">手机、数码、通信设备</a><i>></i>

                <ul class="child-navigation-container">

                    <li><a href="#">个护化妆、清洁用品</a></li>

                    <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li><a href="#">运动户外</a></li>

                </ul>

            </li>

            <li class="navigation-item">

                <a href="#">电脑、办公</a><i>></i>

                <ul class="child-navigation-container">

                    <li><a href="#">汽车、汽车用品</a></li>

                    <li><a href="#">母婴、玩具乐器</a></li>

                    <li><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li><a href="#">图书、音像、电子书</a></li>

                    <li><a href="#">彩票、旅行、充值、票务</a></li>

                    <li><a href="#">理财、众筹、白条、保险</a></li>

                    <li><a href="#">营养保健</a></li>

                </ul>

            </li>

            <li class="navigation-item">

                <a href="#">家居、家具、家装、厨具</a><i>></i>

                <ul class="child-navigation-container">

                    <li><a href="#">理财、众筹、白条、保险</a></li>

                    <li><a href="#">营养保健</a></li>

                </ul>

            </li>

            <li class="navigation-item">

                <a href="#">男装、女装、珠宝</a><i>></i>

                <ul class="child-navigation-container">

                    <li><a href="#">理财、众筹、白条、保险</a></li>

                    <li><a href="#">营养保健</a></li>

                </ul>

            </li>

            <li class="navigation-item"><a href="#">个护化妆、清洁用品</a><i>></i></li>

            <li class="navigation-item">

                <a href="#">鞋靴、箱包、钟表、奢侈品</a><i>></i>

                <ul class="child-navigation-container">

                    <li class="child-navigation-item"><a href="#">家用电器</a></li>

                    <li class="child-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="child-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="child-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="child-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="child-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="child-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="child-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="child-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="child-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="child-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="child-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="child-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="child-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="child-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="child-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="child-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="child-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="child-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="child-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="child-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="child-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="child-navigation-item"><a href="#">运动户外</a></li>

                    <li class="child-navigation-item"><a href="#">汽车、汽车用品</a></li>

                    <li class="child-navigation-item"><a href="#">母婴、玩具乐器</a></li>

                    <li class="child-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="child-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="child-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="child-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="child-navigation-item"><a href="#">营养保健</a></li>

                </ul>

            </li>

            <li class="navigation-item">

                <a href="#">运动户外</a><i>></i>

                <ul class="child-navigation-container">

                    <li class="child-navigation-item"><a href="#">家用电器</a></li>

                    <li class="child-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="child-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="child-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="child-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="child-navigation-item"><a href="#">营养保健</a></li>

                </ul>

            </li>

            <li class="navigation-item">

                <a href="#">汽车、汽车用品</a><i>></i>

                <ul class="child-navigation-container">

                    <li class="child-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="child-navigation-item"><a href="#">营养保健</a></li>

                </ul>

            </li>

            <li class="navigation-item">

                <a href="#">母婴、玩具乐器</a><i>></i>

                <ul class="child-navigation-container">

                    <li class="child-navigation-item"><a href="#">家用电器</a></li>

                    <li class="child-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="child-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="child-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="child-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="child-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="child-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="child-navigation-item"><a href="#">运动户外</a></li>

                    <li class="child-navigation-item"><a href="#">汽车、汽车用品</a></li>

                    <li class="child-navigation-item"><a href="#">母婴、玩具乐器</a></li>

                    <li class="child-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="child-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="child-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="child-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="child-navigation-item"><a href="#">营养保健</a></li>

                </ul>

            </li>

            <li class="navigation-item"><a href="#">食品、酒类、生鲜、特产</a><i>></i></li>

            <li class="navigation-item">

                <a href="#">图书、音像、电子书</a><i>></i>

                <ul class="child-navigation-container">

                    <li class="child-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="child-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="child-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="child-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="child-navigation-item"><a href="#">运动户外</a></li>

                    <li class="child-navigation-item"><a href="#">汽车、汽车用品</a></li>

                    <li class="child-navigation-item"><a href="#">母婴、玩具乐器</a></li>

                    <li class="child-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="child-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="child-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="child-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="child-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="child-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="child-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="child-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="child-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="child-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="child-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="child-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="child-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="child-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="child-navigation-item"><a href="#">营养保健</a></li>

                </ul>

            </li>

            <li class="navigation-item"><a href="#">彩票、旅行、充值、票务</a><i>></i></li>

            <li class="navigation-item">

                <a href="#">理财、众筹、白条、保险</a><i>></i>

                <ul class="child-navigation-container">

                    <li class="child-navigation-item"><a href="#">家用电器</a></li>

                    <li class="child-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="child-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="child-navigation-item"><a href="#">运动户外</a></li>

                    <li class="child-navigation-item"><a href="#">汽车、汽车用品</a></li>

                    <li class="child-navigation-item"><a href="#">母婴、玩具乐器</a></li>

                    <li class="child-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="child-navigation-item"><a href="#">营养保健</a></li>

                </ul>

            </li>

            <li class="navigation-item">

                <a href="#">营养保健</a><i>></i>

                <ul class="child-navigation-container">

                    <li class="child-navigation-item"><a href="#">运动户外</a></li>

                    <li class="child-navigation-item"><a href="#">汽车、汽车用品</a></li>

                    <li class="child-navigation-item"><a href="#">母婴、玩具乐器</a></li>

                    <li class="child-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="child-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="child-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="child-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="child-navigation-item"><a href="#">营养保健</a></li>

                </ul>

            </li>

        </ul>

    </div>

    <div class="container">

        <div class="navigation-title"><a href="#">全部商品分类</a></div>

        <div class="navigation-container relative">

            <div class="navigation-item s2-item" child="cate1"><a href="#">家用电器</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate2"><a href="#">手机、数码、通信设备</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate3"><a href="#">电脑、办公</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate4"><a href="#">家居、家具、家装、厨具</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate5"><a href="#">男装、女装、珠宝</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate6"><a href="#">个护化妆、清洁用品</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate7"><a href="#">鞋靴、箱包、钟表、奢侈品</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate8"><a href="#">运动户外</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate9"><a href="#">汽车、汽车用品</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate10"><a href="#">母婴、玩具乐器</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate11"><a href="#">食品、酒类、生鲜、特产</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate12"><a href="#">图书、音像、电子书</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate13"><a href="#">彩票、旅行、充值、票务</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate14"><a href="#">理财、众筹、白条、保险</a><i>></i></div>

            <div class="navigation-item s2-item" child="cate15"><a href="#">营养保健</a><i>></i></div>

            <div class="s2-child-navigation-container">

                <ul id="cate1" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="s2-navigation-item"><a href="#">营养保健</a></li>

                </ul>

                <ul id="cate2" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                </ul>

                <ul id="cate3" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="s2-navigation-item"><a href="#">营养保健</a></li>

                </ul>

                <ul id="cate4" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">运动户外</a></li>

                    <li class="s2-navigation-item"><a href="#">汽车、汽车用品</a></li>

                    <li class="s2-navigation-item"><a href="#">母婴、玩具乐器</a></li>

                    <li class="s2-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="s2-navigation-item"><a href="#">营养保健</a></li>

                </ul>

                <ul id="cate5" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">营养保健</a></li>

                </ul>

                <ul id="cate6" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">运动户外</a></li>

                    <li class="s2-navigation-item"><a href="#">汽车、汽车用品</a></li>

                </ul>

                <ul id="cate7" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="s2-navigation-item"><a href="#">营养保健</a></li>

                </ul>

                <ul id="cate8" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">运动户外</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="s2-navigation-item"><a href="#">营养保健</a></li>

                </ul>

                <ul id="cate11" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">运动户外</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="s2-navigation-item"><a href="#">营养保健</a></li>

                </ul>

                <ul id="cate12" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">母婴、玩具乐器</a></li>

                    <li class="s2-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="s2-navigation-item"><a href="#">营养保健</a></li>

                </ul>

                <ul id="cate14" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">母婴、玩具乐器</a></li>

                    <li class="s2-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                </ul>

                <ul id="cate15" class="s2-navigation-container hide">

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">母婴、玩具乐器</a></li>

                    <li class="s2-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">理财、众筹、白条、保险</a></li>

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">家用电器</a></li>

                    <li class="s2-navigation-item"><a href="#">手机、数码、通信设备</a></li>

                    <li class="s2-navigation-item"><a href="#">电脑、办公</a></li>

                    <li class="s2-navigation-item"><a href="#">家居、家具、家装、厨具</a></li>

                    <li class="s2-navigation-item"><a href="#">男装、女装、珠宝</a></li>

                    <li class="s2-navigation-item"><a href="#">个护化妆、清洁用品</a></li>

                    <li class="s2-navigation-item"><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>

                    <li class="s2-navigation-item"><a href="#">食品、酒类、生鲜、特产</a></li>

                    <li class="s2-navigation-item"><a href="#">图书、音像、电子书</a></li>

                    <li class="s2-navigation-item"><a href="#">彩票、旅行、充值、票务</a></li>

                    <li class="s2-navigation-item"><a href="#">营养保健</a></li>

                </ul>

            </div>

        </div>

    </div>

</body>

</html>
时间: 2024-10-20 08:20:18

导航栏,可直接使用的相关文章

&lt;iOS 导航栏&gt;第一节:导航栏透明方法实现代码

说下导航栏的透明方法: 很多应用需要导航栏随着向上滑动,逐渐从透明变成不透明,很炫酷,大部分应用都在使用导航栏渐变效果,现附上代码然后直接将实现,一会讲下如何来实现,这一部分直接上代码. 先附上代码: 方法声明: #import <UIKit/UIKit.h> @interface IDSNavBarView : UIView - (instancetype)initWithFrame:(CGRect)frame titleImg:(UIImage *)aTitleImg; - (UILabe

JS学习笔记(一): 使用原生JS 实现导航栏下多级分类弹出效果

在给静态页面静添加交互效果时遇到的问题 : 鼠标划入二级菜单时 一级菜单样 ":hover" 式无法保持 情景如下: 解决思路: 利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li.app_jd a:hover,li.app_jd a.hover{ background-position: -126px -397px; } li.serv

实现底部导航栏

许多的App都使用底部导航栏来实现导航功能,我们可以使用RadioGroup+RadioButton的形式或者直接Button数组的方式实现,而谷歌官方提供了FragmentTabHost来方便快捷实现底部导航栏. android.support.v4.app.FragmentTabHost 主要代码: fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.layout_content); for (int i = 0; i 

网易首页模仿心得---导航栏CSS篇

不仅是CSS方面学习到很多技法,而且由于自己也懂一些SEO,对网易的一些CSS+SEO优化方法,也收获颇多!(本人也是平面设计师,很喜欢网易这类简约型的网页) 好了,在此之前强烈推荐大家可以尝试一下sublime text3 这款编辑器,之前用的editplus,感觉前者真的非常强大,很多插件会让网页开发的速度快很多,很多!! 我首先看了网易的重置CSS样式表和mata标签,其中mata标签中有一行 <meta name="robots" content="index,

Bootstrap入门Demo——制作路径导航栏

今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面,感觉挺好看,然后去官网看了下组件,发现都挺漂亮的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源码看了看. 一,源码文件简介 下载完源码之后,我们肯定是想着先把源码中的Demo先运行下看看,但是,看着这么多英文的东西还是很迷茫,所以,从整体上熟悉下都有什么东西还是很有必要的. 二,如何引入的问题 现在很多UI框架都是基于Jquery的,所以,在使用之前,如果需要,一定要先引入jquery文件,然后

IOS7的状态栏和导航栏

iOS 7中默认的导航栏 在开始定制之前,我们先来看看iOS 7中默认导航栏的外观.通过Xcode用Single View Controller模板创建一个工程.然后将view controller嵌入到一个navigation controller中.如果你不想从头开始,那么也可以在这里下载到这个示例工程. Xcode 5包含有iOS 6和iOS 7模拟器,我们可以在这两个不同的模拟器版本中运行示例程序,进行对比,如下图所示: vcC4tcSxs76w0dXJqzwvaDM+CjxwPtTaa

ios 导航栏 点击barbutton的按钮 下拉列表

环境:xocde5.0.2+ios7.0.1 1.导航栏 ----点击科目--------下拉列表 代码:NGRightTableViewViewController.h #import <UIKit/UIKit.h> @protocol PulldownMenuDelegate -(void)menuItemSelected:(NSIndexPath *)indexPath; -(void)pullDownAnimated:(BOOL)open; @end @interface NGRigh

淘宝分类导航条;纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

微信小程序--仿京东UI样式顶部导航栏

我们先来看看京东的效果 分析 上端导航栏可以放置多个分类,可滑动 点击导航栏最右端按钮可以查看所有分类,同时背景模糊 内容部分右拉跳转到另外的分类 点击分类时导航栏的滑动部分自动滑动到合适的位置 我的实现 代码展示: js /** * categoryView.js - 分类页面 */ var fakeData = require('../../common/fakeData.js') Page( { data: { categories: ['全部'], currentTab: 0, scro

微信小程序开发之tab导航栏

实现功能: 点击不同的tab导航,筛选数据 UI:   js: data:{ navbar: ['半月维保', '季度维保', '半年维保',"年度维保"],    //count:[0,2,3],                                  //记录不同状态记录的数量    currentTab: 4, } //响应点击导航栏  navbarTap: function (e) {    var that = this;    that.setData({