js+css position:relative;absolute;仿大众点评网首页 左边菜单效果[实例]

1.css

.panel{
	position:relative;
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #F8CFA5;
    color: #61646E;
    width:138px;
    border-width: 0 1px 1px;
}

.panel .root-item{
	height:34px;width:139px;line-height:34px;position:relative;border-top: 1px solid #F8CFA5;
}

.panel .root-item .sub-list{
	width:200px;border:1px solid #CCCCCC;position:absolute;left:140px;top:-1px;padding:5px 2px 5px 16px;display: none;
}

.panel .root-item .sub-list li{
	margin:0 10px 5px 0;width:83px;float:left;
}
.panel .active .sub-list{display:block;}

2.页面html

<div style="clear:both;">
					<ul id="panel"  class="panel">
						<li class="root-item" >
							<a href="javascript:void(0)" class="root-name">美食</a>
							<ul class="sub-list">
								<li>美食频道</li>
								<li>本帮江浙菜</li>
								<li>川菜</li>
								<li>粤菜</li>
								<li>湘菜</li>
							</ul>
						</li>
						<li class="root-item" >
							<a href="javascript:void(0)">休闲娱乐</a>
							<ul class="sub-list">
								<li>休闲娱乐频道</li>
								<li>咖啡厅</li>
								<li>酒吧</li>
								<li>KTV</li>
								<li>游玩所</li>
							</ul>
						</li>
						<li class="root-item" >
							<a href="javascript:void(0)" >购物</a>
							<ul class="sub-list">
								<li>购物频道</li>
								<li>综合商场</li>
								<li>食品茶酒</li>
								<li>服饰鞋包</li>
								<li>珠宝饰品</li>
							</ul>
						</li>
						
						
					</ul>
				
				</div>
				

3.js编写

//页面加载
		$(document).ready(function(){
			//选择菜单
			 $('.panel li.root-item').each(function(n){
					
					$($('.panel li.root-item')[n]).mouseover(function(){
						
					    $(this).addClass('active');//直接添加鼠标徘徊的属性值 以后所有更换背景样式 带来便利。
						
					}).mouseout(function(){
						
						  $(this).removeClass('active');
					});
					
				});
			//这个写的有的多余
                         $('.panel li.root-item').mouseover(function(){
                    
                                   $(this).children('ul').show().end().siblings().children('ul').hide();
                         })
                      //可以简化为;
                     //对菜单 添加class
             $('.panel li.root-item').mouseover(function(){
                    $(this).addClass('active');
             }).mouseout(function(){
                
                 $(this).removeClass('active'); 
             });

			 
			
		});