淘宝分类导航条；纯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="text/css">
ul, ol {
    list-style: none outside none;
}
.nav-wrap {
    width:100%;
    height: 60px;
}
.float-navbar {
    border-bottom: 1px solid #F3F3F3;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    z-index: 90000;
}
.navbar {
    border-bottom: 1px solid #FFFFFF;
    width: 100%;
    background: none repeat scroll 0 0 #F7F7F7;
}
.fullscreen{
    border-bottom: 1px solid #FFFFFF;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    line-height: 0;
}
.clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    line-height: 0;
}
 .cat-index {
    background: none repeat scroll 0 0 #F7F7F7;
    margin: 0 auto;
    padding: 0 7px;
    width: 976px;
}
 .cat-index li {
    float: left;
    padding: 9px 0;
    text-align: center;
    width: 61px;
}
 .cat-index li a
{
    text-decoration:none;
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    overflow: hidden;
    padding: 0 7px 0 8px;
    position: relative;
    width: 46px;
}
 .cat-index li .text {
    color: #FFFFFF;
    display: block;
    font-family: helvetica,stheiti,"微软雅黑";
    font-size: 14px;
    font-style: normal;
    line-height: 46px;
    padding: 0;
    position: absolute;
    width: 46px;
    top:46px;
}
 .cat-index li .shadow {
    background: url("../image/shadow.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 46px;
    left: 8px;
    position: absolute;
    top: 0;
    width: 46px;
    z-index: 10;
}
 .cat-index li .icon {
    background-color: #CCCCCC;
    color: #FFFFFF;
    display: block;
    font-family: "hesperindex";
    font-size: 30px;
    font-style: normal;
    height: 46px;
    line-height: 46px;
    width: 46px;
}
</style>

<style type="text/css">
.content
{
    width:980px;
    margin:auto;
    height:800px;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

<script type="text/javascript">
    $(function () {
        var box = ["#66aae9", "#ef7b91", "#8f8cac", "#91b566", "#8f8cac", "#79d9f3", "#79d9f3", "#fa5f94", "#f78499", "#ed9e5b", "#b9d329", "#ea3535", "#66aae9", "#5ddce3", "#69bcf3", "#ffae5b"];
        $(".name").hover(function () {
            var oThis = this;
            $(this).find(".text").show();
            $(this).find(".text").css("background", box[$(oThis).attr("data-id") - 1]);
            $(this).find(".text").animate({ top: "0px" }, 300);
        }, function () {

            $(this).find(".text").animate({ top: "46px" }, 300);

        })

        $(".name").click(function () {
                var ele = $(".name");
                $.each(ele, function () {
                    $(this).find(".icon").css("background", "#CCCCCC");
                })
                $(this).find(".icon").css("background", box[$(this).attr("data-id") - 1]);
        })
    })

</script>
</head>
<body>

<div class="nav-wrap">
    <div id="J_navbar" class="navbar float-navbar">
    <div class="fullscreen">

    <ul class="cat-index clearfix">
    <li id="nav-cat1" class="">
    <a class="name J_catindex t1" href="javascript:;" data-id="1">
    <i class="shadow"></i>
    <i class="icon">男</i>
    <i class="text hidden" style="top: 46px;">男装</i>
    </a>
    </li>
    <li id="nav-cat2" class="">
    <a class="name J_catindex t2" href="javascript:;" data-id="2">
    <i class="shadow"></i>
    <i class="icon">女</i>
    <i class="text hidden" style="top: 46px;">女装</i>
    </a>
    </li>
    <li id="nav-cat3" class="">
    <a class="name J_catindex t3" href="javascript:;" data-id="3">
    <i class="shadow"></i>
    <i class="icon">内</i>
    <i class="text hidden" style="top: 46px;">内衣</i>
    </a>
    </li>
    <li id="nav-cat4" class="">
    <a class="name J_catindex t4" href="javascript:;" data-id="4">
    <i class="shadow"></i>
    <i class="icon">包</i>
    <i class="text hidden" style="top: 46px;">鞋包</i>
    </a>
    </li>
    <li id="nav-cat5" class="">
    <a class="name J_catindex t5" href="javascript:;" data-id="5">
    <i class="shadow"></i>
    <i class="icon">饰</i>
    <i class="text hidden" style="top: 46px;">配饰</i>
    </a>
    </li>
    <li id="nav-cat6" class="">
    <a class="name J_catindex t6" href="javascript:;" data-id="6">
    <i class="shadow"></i>
    <i class="icon">妆</i>
    <i class="text hidden" style="top: 46px;">美妆</i>
    </a>
    </li>
    <li id="nav-cat7" class="">
    <a class="name J_catindex t7" href="javascript:;" data-id="7">
    <i class="shadow"></i>
    <i class="icon">吃</i>
    <i class="text hidden" style="top: 46px;">食品</i>
    </a>
    </li>
    <li id="nav-cat8" class="">
    <a class="name J_catindex t8" href="javascript:;" data-id="8">
    <i class="shadow"></i>
    <i class="icon">电</i>
    <i class="text hidden" style="top: 46px;">数码</i>
    </a>
    </li>
    <li id="nav-cat9" class="">
    <a class="name J_catindex t9" href="javascript:;" data-id="9">
    <i class="shadow"></i>
    <i class="icon">家</i>
    <i class="text hidden" style="top: 46px;">家居</i>
    </a>
    </li>
    <li id="nav-cat10" class="">
    <a class="name J_catindex t10" href="javascript:;" data-id="10">
    <i class="shadow"></i>
    <i class="icon">货</i>
    <i class="text hidden" style="top: 46px;">百货</i>
    </a>
    </li>
    <li id="nav-cat11" class="">
    <a class="name J_catindex t11" href="javascript:;" data-id="11">
    <i class="shadow"></i>
    <i class="icon">文</i>
    <i class="text hidden" style="top: 46px;">文具</i>
    </a>
    </li>
    <li id="nav-cat12" class="">
    <a class="name J_catindex t12" href="javascript:;" data-id="12">
    <i class="shadow"></i>
    <i class="icon">书</i>
    <i class="text hidden" style="top: 46px;">书本</i>
    </a>
    </li>
    <li id="nav-cat13" class="">
    <a class="name J_catindex t13" href="javascript:;" data-id="13">
    <i class="shadow"></i>
    <i class="icon">虚</i>
    <i class="text hidden" style="top: 46px;">虚拟</i>
    </a>
    </li>
    <li id="nav-cat14" class="">
    <a class="name J_catindex t14" href="javascript:;" data-id="14">
    <i class="shadow"></i>
    <i class="icon">闲</i>
    <i class="text hidden" style="top: 46px;">闲置</i>
    </a>
    </li>
    <li id="nav-cat15" class="">
    <a class="name J_catindex t15" href="javascript:;" data-id="15">
    <i class="shadow"></i>
    <i class="icon">潮</i>
    <i class="text hidden" style="top: 46px;">潮品</i>
    </a>
    </li>
    <li id="nav-cat16" class="selected">
    <a class="name J_catindex t16" href="javascript:;" data-id="16">
    <i class="shadow"></i>
    <i class="icon">情</i>
    <i class="text hidden" style="top: 46px;">情侣</i>
    </a>
    </li>
    </ul>
    </div>
    </div>
</div>

<div class="content">
测试页面
</div>

</body>
</html>

用到的一张阴影图片：

淘宝分类导航条；纯css实现固定导航栏,布布扣,bubuko.com