仿照百度百科的下拉效果
如图:
<!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>