<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src=js/jquery-1.7.2.min.js></script>
<script type="text/javascript" src=js/jquery.easyui.min.js></script>
<script type="text/javascript">
$(function(){
$(".maintip").each(function(index){
var tip_height=$(".tips:eq("+index+")").height();
$(this).mouseover(function(){
var win_height=$(window).height(); //获取浏览器当前可视区域高度
var obj=$(this).offset();
var wobj=$(this).width();
if(obj.top+tip_height<win_height){ //判断B底部是否超过浏览器底部
//没超过，按默认A和B顶端偏移位置一致即可
var xobj=obj.left+wobj+"px";
var yobj=obj.top+"px";
}
else{
//超过了，那么抬高B顶部位置
var tip_top=win_height-tip_height;
var xobj=obj.left+wobj+"px";
var yobj=tip_top+"px";
}
$(this).css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"});
$(".tips:eq("+index+")").css({"left":xobj,"top":yobj}).show();
}).mouseout(function(){
$(".tips").hide();
$(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"})
})
})
$(".tips").each(function(){
$(this).mouseover(function(){
$(this).prev(".maintip").css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"})
$(this).show();
}).mouseout(function(){
$(this).hide();
$(this).prev(".maintip").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"});
});
})
})
</script>
<style type="text/css">
body{
margin:100px;
}
.maintip{
position:relative;
z-index:1;
border:1px solid #E5D1A1;
text-align:center;
width:180px;
background:#FFFDD2;
height:35px;
line-height:30px;
}
.tips{
position:absolute;
z-index:2;
width:800px;
min-height:100px;
border:1px solid #E5D1A1;
background:#fff;
display:none;
}
</style>
</head>
<body>
<div class="maintip"><a href="#">服装类</a></div>
<div class="tips">
<p>
<a href="http://www.baidu.com">各种衣服啊</a>
</p> <br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>
<a href="http://www.baidu.com">来百度一下找衣服啊</a>
</p>
</div>
<div class="maintip">家电数码</div>
<div class="tips">
<p>
M8卖那么贵，HTC请你继续flop好么
</p>
</div>
<div class="maintip">美食</div>
<div class="tips">
<p>
葡萄酒，白酒，啤酒 <br/><br/><br/><br/><br/><br/><br/><br/><br/>
我特么只是想把这个框拉长
</p>
</div>
<div class="maintip">玩具</div>
<div class="tips">
<p>
<a href="http://www.123.com">智力魔方啊神马的你要的都有哦</a>
</p>
</div>
<div class="maintip">玩具</div>
<div class="tips">
<p>
<a href="http://www.123.com">智力魔方啊神马的你要的都有哦</a>
</p>
</div>
<div class="maintip">玩具</div>
<div class="tips">
<p>
<a href="http://www.123.com">智力魔方啊神马的你要的都有哦</a>
</p>
</div>
<div class="maintip">玩具</div>
<div class="tips">
<p>
<a href="http://www.123.com">智力魔方啊神马的你要的都有哦</a>
</p>
</div>
<div class="maintip">玩具</div>
<div class="tips">
<p>
<a href="http://www.123.com">智力魔方啊神马的你要的都有哦</a>
</p>
</div>
<div class="maintip">玩具</div>
<div class="tips">
<p>
<a href="http://www.123.com">智力魔方啊神马的你要的都有哦</a>
</p>
</div>
</body>
</html>
