jQuery写二级列表选项卡

css代码

<style type="text/css">
        body,div,ul,li,a,h3{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            width:180px;
            margin-left: 30px;
        }
        li{
            list-style: none;
            width:178px;
            height:30px;
            padding:5px 10px;
            background: #BCD68D;
        }
        .list{
            position: relative;
        }
        .list>li{
            border-bottom: 1px solid #000;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
        }
        a{
            color: #000;
            font-size: 16px;
            text-decoration: none;
            font-family: "microsoft yahei";
        }
        .hbgc{
            background-color: red;
        }
        .second{
            position: absolute;
            left: 147px;
            display: none;
            border: 1px solid #000;
        }
        .sec1{
            top:36px;
        }
        .sec2{
            top:66px;
        }
        .sec3{
            top:96px;
        }
        .sec4{
            top:126px;
        }
        .sec5{
            top:156px;
        }
        
        h3{
            width: 178px;
            border: 1px solid #000;
            background: #BCD68D;
            padding:5px 10px;
        }
        .borc{
            position: relative;
        }
        li.borc:before{
            content:"";
            width:4px;
            height: 30px;
            display: block;
            background: #BCD68D;
            z-index: 99;
            position: absolute;
            top:0;
            left:-2px;
        }
    </style>

html代码

<div class="nav">
            <ul class="list">
                <h3>电脑数码类产品</h3>
                <li><a href="#">笔记本</a>
                    <ul class="second sec1">
                        <li class="borc"><a href="#">笔记本1</a></li>
                        <li><a href="#">笔记本2</a></li>
                        <li><a href="#">笔记本3</a></li>
                    </ul>
                </li>
                <li><a href="#">移动硬盘</a>
                    <ul class="second sec2">
                        <li class="borc"><a href="#">移动硬盘1</a></li>
                        <li><a href="#">移动硬盘2</a></li>
                        <li><a href="#">移动硬盘3</a></li>
                    </ul>
                </li>
                <li><a href="#">全球购</a>
                    <ul class="second sec3">
                        <li class="borc"><a href="#">全球购1</a></li>
                        <li><a href="#">全球购2</a></li>
                        <li><a href="#">全球购3</a></li>
                    </ul>
                </li>
                <li><a href="#">电脑软件</a>
                    <ul class="second sec4">
                        <li class="borc"><a href="#">电脑软件1</a></li>
                        <li><a href="#">电脑软件2</a></li>
                        <li><a href="#">电脑软件3</a></li>
                    </ul>
                </li>
                <li><a href="#">数码产品</a>
                    <ul class="second sec5">
                        <li class="borc"><a href="#">数码产品1</a></li>
                        <li><a href="#">数码产品2</a></li>
                        <li><a href="#">数码产品3</a></li>
                    </ul>
                </li>
            </ul>
        </div>

javascript代码

<script type="text/javascript">
        $(function(){
            $("li").mouseover(function(){
                $(this).children("ul").css("display","block");
            });
            $("li").mouseout(function(){
                $(this).children("ul").css("display","none");
            });

        })
    </script>