效果:鼠标移上去右边显示二级菜单。
效果图:
实现代码
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin:0;padding:0;}#nav{width:100%;height:420px;background-color:lightgrey;}#nav1{height:420px;width:1200px;background-color:lightblue;margin:0 auto;}#nav1 .menu{width:190px;height:420px;background:black;float:left;}#nav1 .flash{width:820px;height:420px;background:palevioletred;float:left;}#nav1 .news{width:190px;height:420px;background:greenyellow;float:left;}#nav1 .menu ul li{list-style-type:none;width:190px;height:69px;border-bottom:1px solid #1e1e1d;color:whitesmoke;text-indent:20px;position:relative;}#nav1 .menu ul li p{font-size:14px;color:whitesmoke;}/*构建二级菜单*/.menu ul li .more{width:300px;height:400px;background:black;position:absolute;left:189px;border:1px solid gray;display:none;}.menu ul li .border_top{height:1px;background:gray;width:190px;position:absolute;top:-1px;display:none;}.menu ul li .border_bottom{height:1px;background:gray;width:190px;position:absolute;bottom:-1px;display:none;}.menu ul li .border_right{height:70px;background:black;width:1px;position:absolute;right:0px;bottom:-1px;display:none;}#nav1 .menu ul li.hover .more{display:block;}#nav1 .menu ul li.hover .border_top{display:block;}#nav1 .menu ul li.hover .border_bottom{display:block;}#nav1 .menu ul li.hover .border_right{display:block;}</style>
</head>
<body>
<div id="nav"><div id="nav1"><div class="menu"><ul><li><div class="more"></div><div class="border_top"></div><div class="border_bottom"></div><div class="border_right"></div></li><li><div class="more"></div><div class="border_top"></div><div class="border_bottom"></div><div class="border_right"></div></li><li><div class="more"></div><div class="border_top"></div><div class="border_bottom"></div><div class="border_right"></div></li><li><div class="more"></div><div class="border_top"></div><div class="border_bottom"></div><div class="border_right"></div></li><li><div class="more"></div><div class="border_top"></div><div class="border_bottom"></div><div class="border_right"></div></li><li><div class="more"></div><div class="border_top"></div><div class="border_bottom"></div><div class="border_right"></div></li></ul></div><div class="flash"></div><div class="news"></div></div>
</div>
<script src="jquery-2.1.0.min.js"></script>
<script>$(".menu ul li").hover(function(){var index=$(this).index();//鼠标移上去var top=$(this).position().top;//得到当前li到顶部的距离var height1=$(this).find(".more").height();//得到more盒子的高度var height=height1/3;//当top比当前盒子高度三分之一还大if(top>height){if(index==5){$(this).find(".more").css("bottom","-1px");$(this).addClass("hover");}else{$(this).find(".more").css("top","-"+height+"px");$(this).addClass("hover");}}else{$(this).find(".more").css("top","-1px");$(this).addClass("hover");}},function(){//鼠标移开$(this).removeClass("hover");});
</script>
</body>
</html>