二级菜单 

<%@ 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>

 

posted @ 2016-08-20 10:25  AugustTwenty  阅读(182)  评论(0)    收藏  举报