原理很简单.
涉及到知识点：
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>