基于jquery的大众点评，分类导航实现代码

　　<div id="menu">

　　<ul id="G_chan-panel" class="pop-panel pp_channels Fix" style="position: absolute; visibility: visible; z-index: 1001; top: 175px; left: 189px; ">

　　<li class="root-item "> <a href="#" class="root-name"><span>餐饮</span></a>

　　<ul class="pop-panel Fix sub-list">

　　<li class="main-cate"><a href="#">餐饮频道</a></li>

　　<li><a href="#">粤菜</a></li>

　　...

　　</ul>

　　</li>

　　<li class="root-item"> <a href="#" class="root-name"><span>购物</span></a>

　　<ul class="pop-panel Fix sub-list">

　　<li class="main-cate"><a href="#">购物频道</a></li>

　　<li><a href="#">超市/便利店</a></li>

　　...

　　<li><a href="#">其他</a></li>

　　</ul>

　　</li>

　　</ul>

　　</div>

　　<script type="text/javascript">

　　$(function () {

　　$('#G_chan-panel').delegate("li", "mouseenter", function () { $(this).addClass("active") });

　　$('#G_chan-panel').delegate("li", "mouseleave", function () { $(this).removeClass("active") });

　　});

　　</script>

　　BODY {

　　background-color:#fff;

　　color:#555;

　　font: 9pt/14px Tahoma, "宋体", Arial, Helvetica, Sans-Serif;

　　letter-spacing: 0;

　　margin: 0;

　　}

　　html, body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, a, img, th, td, form, fieldset, iframe, object, pre, code, legend, blockquote {

　　border: 0 none;

　　margin: 0;

　　outline: 0 none;

　　padding: 0;

　　}

　　h1, h2, h3, h4, h5, h6 {

　　font-size: 100%;

　　font-weight: normal;

　　}

　　UL, LI {

　　list-style: none outside none;

　　margin: 0;

　　padding: 0;

　　}

　　IMG {

　　border: medium none;

　　margin: 0;

　　padding: 0;

　　cursor:pointer;

　　}

　　input, img, select {

　　vertical-align: middle;

　　}

　　A {

　　color: #666666;

　　}

　　A:link {

　　color: #666666;

　　text-decoration: none;

　　}

　　A:visited {

　　color: #666666;

　　text-decoration: none;

　　}

　　A:hover {

　　color: #C90809;

　　text-decoration: none;

　　}

　　/*导航*/

　　.pp_channels .root-item, .pp_channels .root-name, .pp_channels .root-name span, .pp_channels .sub-list li a {

　　background-image: url("bg.png");

　　background-repeat: no-repeat;

　　}

　　.G_chan-panel {

　　position: absolute;

　　z-index: 1000;

　　top: 120px;

　　left: 199px;

　　visibility: hidden;

　　}

　　.pp_channels {

　　width: 138px;

　　padding: 0;

　　border-width: 0 0 2px 1px;

　　border-radius: 5px;

　　-webkit-border-radius: 5px;

　　-moz-border-radius: 5px;

　　-moz-box-shadow: -1px 1px 1px #ccc;

　　-webkit-box-shadow: 0 1px 5px #ccc;

　　box-shadow: 0 1px 5px #ccc;

　　}

　　.pp_channels .root-item {

　　zoom: 1;

　　position: relative;

　　width: 139px;

　　height: 34px;

　　background-position: -13px -373px;

　　overflow: visible;

　　vertical-align: middle;

　　}

　　.pp_channels .root-name {

　　display: block;

　　z-index: 1001;

　　position: relative;

　　border-top:1px solid #B9F5D2;

　　padding-left: 10px;

　　background-position: -10px -358px;

　　cursor: pointer;

　　}

　　.pp_channels .root-name span {

　　display: block;

　　border-right: 1px solid #B9F5D2;

　　padding-left: 9px;

　　height: 34px;

　　font-size: 1.2em;

　　line-height: 34px;

　　color: #000;

　　background-position: -167px -358px;

　　}

　　.pp_channels .active .root-name {

　　background: #fff;

　　}

　　.pp_channels .active .root-name span {

　　color: #C00;

　　border-color: #fff;

　　}

　　.pp_channels .no-sub .root-name span {

　　border-color: #fff;

　　background-position: 20px -358px;

　　}

　　.pp_channels .sub-list {

　　left: 138px;

　　top: -34px;

　　padding: 5px 2px 5px 16px;

　　width: 200px;

　　overflow: hidden;

　　_top: -35px;

　　-moz-box-shadow: -1px 1px 1px #ccc;

　　-webkit-box-shadow: 0 1px 5px #ccc;

　　box-shadow: 0 1px 5px #ccc;

　　}

　　.pp_channels .active .sub-list {

　　visibility: visible;

　　}

　　.pp_channels .sub-list li {

　　float: left;

　　width: 83px;

　　margin: 0 10px 5px 0;

　　}

　　.pp_channels .sub-list .main-cate {

　　width: 200px;

　　margin-right: -10px;

　　font-weight: bold;

　　}

　　.pp_channels .sub-list a {

　　padding-left: 3px;

　　line-height: 21px;

　　background-position: -169px -418px;

　　*background-position: -169px -420px;

　　}

　　.pp_channels .sub-list a: hover {

　　background-position: -169px -438px;

　　*background-position: -169px -440px;

　　}

　　.pop-panel {

　　z-index: 1000;

　　position: absolute;

　　visibility: hidden;

　　border: 1px solid #B9F5D2;

　　padding: 5px 9px;

　　background: #fff;

　　color: #61646E;

　　#margin-left:-0px;

　　_margin-left:-0px;

　　}

　　.pop-panel a {

　　color: #61646E;

　　}

　　.pop-panel a: hover {

　　text-decoration:none;

　　color: #C00;

　　}

　　//定位

　　var X = $('#G_chan').offset().top;

　　var Y = $('#G_chan').offset().left;

　　$("#G_chan-panel").offset({ top: X + 36, left: Y - 5 });

　　//鼠标经过 动画效果 防点击链接跳转

　　$("#G_chan").hover(function (event) {

　　event || event.stopPropagation(); $("#G_chan-panel").slideDown().mouseleave(function () {

　　$(this).slideUp()

　　});

　　});

　　//点击 城市列表 下拉动画 防冒泡

　　$("#G_loc").click(function (event) { event.preventDefault(); $("#G_loc-panel").slideToggle("slow"); });作者：曾祥展