Jquery实现缓慢显示下拉菜单

来源：互联网发布：软件开发最新技术编辑：程序博客网时间：2024/06/03 22:47

HTML代码：

<div class="navMenu">        <ul>            <li class="active"><a href="#">首页</a>                <ul>                    <span class="corner"></span>                    <li><a href="#">JavaScript+</a></li>                    <li><a href="#">语文</a></li>                    <li><a href="#">英语</a></li>                </ul>            </li>            <li><a href="#">课程大厅</a></li>            <li><a href="#">学习中心+</a>                <ul>                    <span class="corner"></span>                    <li><a href="#">JavaScript+</a></li>                    <li><a href="#">语文</a></li>                </ul>            </li>            <li><a href="#">帮助</a></li>        </ul>    </div>

css代码：

 *{            padding:0;            margin:0;        }        /*一级菜单*/        .navMenu {            width:570px;            margin:0 auto;            margin-top: 20px;            position: relative;        }        .navMenu ul li{            float: left;        }        li{            list-style: none;            background-color: #eee;            width: 140px;            height: 34px;            text-align: center;            margin-right: 2px;            margin-bottom: 2px;        }        .navMenu ul li:hover{            background:url(images/slide-pannel_14.png) 0 0 repeat-x;        }        ul li a{            line-height: 34px;            text-align: center;            font-size: 20px;            color: #000;            text-decoration: none;            display: block;            padding:0 10px;        }        /*二级菜单*/        .navMenu ul li ul {            display: none;            position:absolute;            top:34px;        }        .active{            background:url(images/slide-pannel_14.png) 0 0 repeat-x;        }        .corner{            display: block;            height: 11px;            background: url("images/bird.png") 61px 0 no-repeat ;        }

Js代码：

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>    <script type="text/javascript">        $(document).ready(function(){            $(".navMenu li").mouseenter(function(){                $(this).find("ul").slideDown("slow"); //慢慢展开            }).mouseleave(function(){                $(this).find("ul").slideUp("slow");//慢慢收起            })        })    </script>

0 0