jquery菜单插件

原理很简单.

---

涉及到知识点：

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

offset的概念

2、>的概念。

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

---

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

支持无限的伸缩。支持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>