<%@ 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; 180px; background:#FFFDD2; height:35px; line-height:30px; } .tips{ position:absolute; z-index:2; 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>