jQuery实现二级菜单显示（超链接中）

来源：互联网发布：成都数据恢复公司编辑：程序博客网时间：2024/05/16 12:18

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用jquery实现的一个下拉菜单</title>

    <script src="/Scripts/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

    /*当鼠标悬浮在某个链接上时，改变下拉列表的display属性*/
        $(document).ready(function () {

            $('nav li').hover(function () {
           /* 当鼠标悬浮在链接上时执行的操作*/
                 $(this).find('.sub-menu').css('display', 'block');
            }, function () {

           /*当鼠标离开链接时执行的操作*/
             $(this).find('.sub-menu').css('display', 'none');


         });

    });

   </script>

   
    <style>
        nav a {       /* 设置所有的链接都没有下划线*/
            text-decoration: none;
            display:inline-block;
            width:100px;
            height:30px;
            line-height:30px;
            color:white;
            background:blue;
            margin:auto 5px;
        }

        nav > ul > li { /*设置一级菜单样式*/
            float: left;
            text-align: center;
            padding: 0 0.5em;

        }

        nav li ul.sub-menu {     /*设置二级菜单样式*/
            display: none;

padding-left: 0 !important;

position:absolute; /*注意：如果要使二级菜单不把菜单下面的内容挤到下面去，则要设置该属性，否则菜单下面的内容会被挤到下面去*/

z-index:1;/*将该二级菜单的层级提高*/

}

        .sub-menu li {
            color: white;    /*设置二级菜单里的项的样式*/
            margin:1px auto;
        }

            .sub-menu li:hover {    /*设置二级菜单中有鼠标悬停在某一项上时的样式*/
                background-color: white;

            }

                .sub-menu li:hover a { /*设置二级菜单中有鼠标悬停在某一项上时链接的样式*/
                    color: white;


                }


        ul {
            list-style: none; /*设置无序列表的样式*/
        }
    </style>
</head>
<body>
     
    <nav>
        <ul>
            <li><a href="#"> 首页</a>
                    <ul class="sub-menu">
                        <li><a href="#">sub1</a></li>
                        <li><a href="#">sub2</a></li>
                        <li><a href="#">sub3</a></li>
                    </ul>
            </li>
            <li><a href="#">第二页 </a>
                    <ul class="sub-menu">
                        <li><a href="#">sub1</a></li>
                        <li><a href="#">sub2</a></li>
                        <li><a href="#">sub3</a></li>
                    </ul>
            </li>
            <li><a href="#">第三页 </a>
                    <ul class="sub-menu">
                        <li><a href="#">sub1</a></li>
                        <li><a href="#">sub2</a></li>
                        <li><a href="#">sub3</a></li>
                    </ul>
            </li>
        </ul>
    </nav>

</body>
</html>

0 0