jquery下拉菜单

浏览数：53 / 时间：2015年06月09日

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        ul, ol, li
        {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        #menu *
        {
            line-height: 30px;
        }
        #menu a
        {
            text-decoration: none;
            display: block;
        }
        #menu ul
        {
            text-align: left;
            background: #333;
        }
        #menu .arrow
        {
            /* 菜单项的右侧小箭头 */
            float: right;
            padding-right: 5px;
        }
        
        #menu > ul
        {
            height: 30px;
        }
        /* 即使没有菜单项也能保持顶级菜单栏的高度。 */
        
        
        /* 一级菜单 */
        
        #menu > ul > li
        {
            text-align: center;
            display: inline-block;
            width: 80px;
        }
        #menu > ul > li > a
        {
            color: #fff;
        }
        
        #menu > ul > li:hover
        {
            background: #666;
        }
        
        /* 下拉的菜单栏 */
        
        #menu > ul > li ul
        {
            display: none;
            width: 150px;
            position: absolute;
            background: #c1cd94;
            box-shadow: 2px 2px 2px #000;
            -webkit-box-shadow: 2px 2px 2px #000;
            -moz-box-shadow: 2px 2px 2px #123;
        }
        
        /* 下拉菜单的菜单项 */
        #menu > ul > li > ul li
        {
            padding-left: 5px;
            position: relative;
        }
        #menu > ul > li > ul li > a
        {
            color: #000;
        }
        
        #menu > ul > li > ul li:hover
        {
            background: #d3dbb3;
        }
        
        /*  
三级及以下的菜单项的定位 */
        #menu > ul > li > ul > li ul
        {
            left: 150px;
            top: 0px;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // $(‘#menu>ul>li>ul‘).find(‘li:has(ul:not(:empty))>a‘).append("<span  class=‘arrow‘></span>");

            $("#menu>ul>li").bind(‘mouseover‘, function () // 顶级菜单项的鼠标移入操作  
            {
                $(this).children(‘ul‘).slideDown(300);


            }).bind(‘mouseleave‘, function () // 顶级菜单项的鼠标移出操作  
            {

                $(this).children(‘ul‘).slideUp(300);
            });

        });  
       
    </script>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="">菜单一</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a>
                       
                    </li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="">菜单二</a>
                <ul>
                    <li><a href="">子菜单4</a></li>
                    <li><a href="">子菜单5</a></li>
                    <li><a href="">子菜单6</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery下拉菜单