二级导航demo

Radish999

于 2018-03-07 09:40:06 发布

阅读量252

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Radish999/article/details/79466430

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<style>
        .item{
            float: left;
            width: 100px;
        }
        .aLink{
            display: block;
            width: 100%;
            padding: 10px 0;
            text-align: center;
        }
        .twoNav{
            width: 100%;
            display: none;
        }
        .twoNav-ul{
            list-style: none;

        }
        .ul-item{
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #f80;
        }
    </style>

<div>
    <ul style="list-style: none">
        <li class="item">
            <a href="###" class="aLink">
                home
            </a>
            <div class="twoNav">
                <ul class="twoNav-ul">
                    <li class="ul-item">
                        one
                    </li>
                    <li class="ul-item">
                        two
                    </li>
                    <li class="ul-item">
                        three
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

<script type="text/javascript">
        var mst;
        $(".item").hover(function(){
            var curItem = $(this);
            mst = setTimeout(function(){//延时触发
                curItem.find(".twoNav").slideDown('fast');
                mst = null;
            });
        }, function(){
            if(mst!=null)clearTimeout(mst);
            $(this).find(".twoNav").slideUp('fast');
        });

    </script>