仿百度百科的下拉菜单实现 -

lxl631

浏览: 2041 次

最近访客更多访客>>

dj2437

happinesss

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2)

社区版块

存档分类

2013-10 ( 2)
更多存档...

仿百度百科的下拉菜单实现

仿照百度百科的下拉效果

如图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" >
</script>
<style type="text/css">
	 *{
		margin:0;
		padding:0; 
	 }
	 
	 body{
		background:#F5F5F5; 
	 }
	 .row{
		background:#2B6BAC;  
	 }
	 
	 .nav{
	 	width:800px; 	
		height:40px;	
		margin-left:auto;
		margin-right:auto;
		
	 }
	  
	  .menu{
	  	float:left;  
		line-height:40px; 
		font-size:14px;
		margin-right:10px;
		font-weight:bold;
		color:white;
		cursor:pointer;
		width:100px;
		text-align:center;
	  }
	  .tip_dis{
	  		 
	  }
	  .hide_tip{
	 	display:none; 
		position:relative;
		top:0;
		left:0;
		border:1px solid #255B92;
		border-top:none;
		font-size:12px;
	  }
	  .hide_tip div{
	  	color:#136ec2;
		font-weight:normal;
		text-align:center;
	  }
	  
	  .over_cls{
	 	background:#255C94; 
	  }
	 
</style>
 
<script type="text/javascript">
 	 $(document).ready(function(){
	 	$(".menu").hover(function(){
			$(this).children(".tip_dis").addClass("over_cls");
			$(this).children(".hide_tip").show();
		},function(){
			$(this).children(".tip_dis").removeClass("over_cls");
			$(this).children(".hide_tip").hide();
		});
		
		$(".hide_tip div").hover(function(){
			$(this).css("text-decoration","underline");
		},function(){
			$(this).css("text-decoration","none");
		});
	 });
</script>
</head>
<body>
  
  <div style="width:100%">
     		<div class="row">
				<div class="nav">
						<div class="menu">
							<div class="tip_dis">首页</div>
							<div class="hide_tip">
								<div>首页一</div>
								<div>首页二</div>
								<div>首页三</div>
								<div>首页四</div>
							</div>
						</div>
						
						<div class="menu">
							<div class="tip_dis">手机百科</div>
							<div class="hide_tip">
								<div>安卓</div>
								<div>苹果</div>
							</div>
						</div>
						
						<div class="menu">
							<div class="tip_dis">校园百科</div>
							<div class="hide_tip">
								<div>青春风铃</div>
								<div>故事会</div>
								<div>萌芽</div>
							</div>
						</div>
						
						<div class="menu">
							<div class="tip_dis">校园百科</div>
							<div class="hide_tip">
								<div>青春风铃</div>
								<div>故事会</div>
								<div>萌芽</div>
							</div>
						</div>
						
						<div class="menu">
							<div class="tip_dis">校园百科</div>
							<div class="hide_tip">
								<div>青春风铃</div>
								<div>故事会</div>
								<div>萌芽</div>
							</div>
						</div>	
				</div>
			</div>
 </div>
	 
</body>
</html>