下拉列表（web）,用jQuery实现

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下拉列表</title>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

.ul {
            width: 550px;
            height: 30px;
            margin: 100px auto;
            background-color: deepskyblue;
            padding-left:10px;
        }

.ul li {
                float: left;
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                margin-right:10px;
                _display:inline;
                position:relative; 
            }
            .ul  ul{
                display:none;
                position:absolute;
            }
    </style>
    <script type="text/javascript" src="jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.ul>li').mouseover(function (e) {
                $(this).children().stop().slideDown(500);        //向下滑动的速度500ms
            });
            $('.ul>li').mouseout(function (e) {
                $(this).children().stop().slideUp(500);           //向上滑动的速度500ms
            });
        });
    </script>
</head>
<body>
    <ul class="ul">
        <li>
            老大
            <ul>
                <li>laoer</li>
                <li>laoer</li>
                <li>laoer</li>
            </ul>
        </li>
        <li>
            老大<ul>
                <li>laoer</li>
                <li>laoer</li>
                <li>laoer</li>
            </ul>
        </li>
        <li>
            老大<ul>
                <li>laoer</li>
                <li>laoer</li>
                <li>laoer</li>
            </ul>
        </li>
        <li>
            老大<ul>
                <li>laoer</li>
                <li>laoer</li>
                <li>laoer</li>
            </ul>
        </li>
        <li>
            老大<ul>
                <li>laoer</li>
                <li>laoer</li>
                <li>laoer</li>
            </ul>
        </li>
    </ul>
</body>
</html>

注：jQuery中的动画和事件是遵循一个叫做排队机制的原理，也就是说如果一次触发执行了很多动画那么后面的动画不会自动替换前面的动画，而会一直排队等待执行；
 解决方法：在执行动画之前用stop（）方法来清空排队。