预览地址

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

Css

<style>

---------------------

.nav_title{text-align:center; padding:50px 0; font-size:16px;}

.nav_title a{margin:0 20px; display:inline-block; border:1px solid #ccc; height:40px; line-height:40px; padding:0 20px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; overflow:hidden}

.nav_title .a{color:#fff; background:#ff6637;border:1px solid #ff6637;}/*更改背景颜色background:#ff6637*/

.content_left{width:100%; margin:0 auto}/*更改宽度width:240px;*/

.content_left .title{height:45px; background:#ff6637; color:#fff; padding:0 20px; line-height:45px; font-size:16px}

.content_left .title span{padding-left:10px;}

.left_nav{border:1px solid #e6e6e6; border-top:0; overflow:hidden;}

.left_nav ul{margin-top:-1px;}

.left_nav li{border-top:1px dashed #e7e7e7}

.left_nav li .view_t.active{background:#eee;}

.left_nav li .view_t{height:50px; line-height:50px; padding:0 0 0 18px; position:relative}

.left_nav li .view_t a,.left_nav li .t.hover:hover a{color:#000}

.left_nav li .view_t:hover a{color:#ff5825}

.left_nav li .txt{padding:0 0 20px 18px; display:none}

.left_nav li .txt p{line-height:30px; height:30px; overflow:hidden}

.left_nav .more{background:#ff6637; display:block; width:120px; height:30px; margin:0 auto; text-align:center; line-height:30px; color:#fff; cursor:pointer;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px; overflow:hidden}

.left_nav .more:hover{background:#ff5825}

.left_nav .more span{padding-right:18px; background:url(img/ioc_ba.png) no-repeat right center;}

.left_nav .more.hover span{background:url(img/ioc_t.png) no-repeat right center;}

.explain_txt{width:860px; margin:0 auto; line-height:40px; padding:0 0 200px 0; font-size:16px}</style>

---------------------

Html

---------------------

<div class="content_left">

    <div class="title"><i class="xzicon-menu"></i><span>产品分类</span></div>

    <div class="left_nav">  

        <ul>

            <li>

                <div class="view_t"><a href="#">精品推荐</a></div>

                <div class="txt">

                    <p><a href="#">人字形网带</a></p>

                    <p><a href="#">不锈钢网带</a></p>

                </div>

            </li>

            <li>

                <div class="view_t"><a href="#">网带</a></div>

                <div class="txt">

                    <p><a href="#">人字形网带</a></p>

                    <p><a href="#">不锈钢网带</a></p>

                </div>

            </li>

            <li>

                <div class="view_t"><a href="#">网链</a></div>

                <div class="txt">

                    <p><a href="#">人字形网带</a></p>

                    <p><a href="#">不锈钢网带</a></p>

                </div>

            </li>

            <li>

                <div class="view_t"><a href="#">链轮</a></div>

                <div class="txt">

                    <p><a href="#">人字形网带</a></p>

                    <p><a href="#">不锈钢网带</a></p>

                </div>

            </li>

            <li>

                <div class="view_t"><a href="#">食品输送机</a></div>

                <div class="txt">

                    <p><a href="#">人字形网带</a></p>

                    <p><a href="#">不锈钢网带</a></p>

                </div>

            </li>

            <li>

                <div class="view_t"><a href="#">网带</a></div>

                <div class="txt">

                    <p><a href="#">人字形网带</a></p>

                    <p><a href="#">不锈钢网带</a></p>

                </div>

            </li>

        </ul>

    </div>

</div>

---------------------

Js

---------------------

$(".left_nav li .view_t").click(function(){
    $(this).toggleClass("active");
    $(this).next(".txt").slideToggle()
})

---------------------