原理很简单.

涉及到知识点：

1、jquery的position注意这里是jquery的position，不是css的position

offset的概念

2、>的概念。

3、.ulh>li 的优先级要比直接在li上加 .selected的样式高。因为.ulh>li 是元素样式，位于优先级老2.

支持无限分级的菜单，兼容ie8+，chorm，firefox jquery菜单插件

支持无限的伸缩。支持url效果。图标和样式欢迎大家自行改造。欢迎大家使用。

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .ulh {

            padding: 0;

            list-style: none;

            font-family: "Microsoft YaHei UI";

            font-size: 14px;

            position: relative;

        }

        .ulh >li {

            float: left;

            background-color: bisque;

            border-collapse: collapse;

            width: 200px;

            box-sizing: border-box;

            text-align: center;

            height: 30px;

            line-height: 28px;

            border: 1px solid red;

        }

        .ulh >li>a {

            cursor: pointer;

            display: block;

        }

        .ulv {

            padding: 0;

            list-style: none;

            font-family: "Microsoft YaHei UI";

            font-size: 14px;

            position: relative;

        }

        .ulv >li {

            background-color: bisque;

            border-collapse: collapse;

            display: block;

            width: 200px;

            box-sizing: border-box;

            height: 30px;

            line-height: 28px;

            border: 1px solid red;

        }

        .ulv >li a {

            cursor: pointer;

            display: block;

        }

        .selected {

            background-color: #a1ffaa;

        }

    </style>

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

    <script>

    $(document).ready(function () {

        $("#maliang >li").show();

        $("#maliang ul").hide();

        $("#maliang li ").hover(function () {

            var x = $(this).position();

            var float1 = $(this).css("float");

            if (float1.toUpperCase() == "LEFT") {

                $(this).find(">ul").css({"position": "absolute", "left": x.left, 'top': x.top + 30});

            }

            else {

                $(this).find(">ul").css({"position": "absolute", "left": x.left + 200, 'top': x.top});

            }

            $(this).find(">ul").slideDown();

            $(this).addClass("selected");

        }, function () {

            $(this).find(">ul").slideUp();

            $(this).removeClass("selected");

        });

    })

    </script>

</head>

<body >

<ul class="ulh" id="maliang">

    <li id="ol" style="position: relative">

        <a href="http://www.baidu.com">新闻</a>

        <ul class="ulv" >

            <li><a href="">国内</a>

            </li>

            <li><a href="">国际</a></li>

            <li><a href="">娱乐</a></li>

        </ul>

    </li>

    <li id="keji"><a>科技</a>

        <ul class="ulv" >

            <li><a href="">互利网</a></li>

            <li><a href="">软件</a></li>

            <li><a href="">电子商务</a>

                <ul class="ulv">

                    <li><a href="">1.1</a></li>

                    <li><a href="">1.2</a></li>

                    <li><a href="">1.3</a>

                        <ul class="ulv">

                            <li><a href="">1.1.1</a></li>

                            <li><a href="">1.2.1</a></li>

                            <li><a href="">1.3.1</a><ul class="ulv">

                                <li><a href="">1.1.1</a></li>

                                <li><a href="">1.2.1</a></li>

                                <li><a href="">1.3.1</a></li>

                            </ul></li>

                        </ul></li>

                </ul>

            </li>

        </ul>

    </li>

    <li>   <a>娱乐</a>

        <ul class="ulv" >

            <li><a href="">亚洲娱乐</a></li>

            <li><a href="">欧美娱乐</a></li>

            <li><a href="">全球娱乐资讯</a></li>

        </ul>

    </li>

    <li> <a href="">体育新闻</a></li>

</ul>

</body>

</html>

秒客网

jquery菜单插件

涉及到知识点：

相关文章