鼠标悬浮，下拉菜单，距离一定距离
<!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>news</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/public.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/pop.js"></script>
</HEAD>
<BODY>
<div class="bottom">
<div class="bottom-nav">
<a href="#" class="gyhj">关于我们</a>
<ul class="about-pop">
<li><a href="">公司简介</a>
</li>
<li><a href="">组织架构</a>
</li>
<li><a href="">公司资质</a>
</li>
<li><a href="">董事长致辞</a>
</li>
</ul>
<a href="" class="hzhb">合作伙伴</a>
<a href="" class="xmjs">项目介绍</a>
<a href="" class="tdjs">团队介绍</a>
<a href="" class="gsfc">公司风采</a>
<a href="" class="xwzx">新闻中心</a>
<a href="" class="zxns">招贤纳士</a>
<a href="" class="lxwm">联系我们</a>
</div>
</div>
<!----bottom------>
</BODY>
</HTML>
===================
.bottom {
width: 100%;
height: 200px;
background-color: #E8E8E8;
border-top: 5px #861F99 solid;
padding-top: 5px;
margin: 200px auto;
}
.bottom .bottom-nav {
width: 1200px;
height: 200px;
margin: 50px auto 0;
position: relative;
}
.bottom-nav .gyhj {
background: url(../images/gyhj-logo.png)0 no-repeat;
background-size: 36%;
}
.bottom-nav .gyhj:hover {
background: url(../images/gyhj-logo-hover.png)0 no-repeat;
background-size: 36%;
}
.bottom-nav .hzhb {
background: url(../images/hzhb-logo.png)0 no-repeat;
background-size: 36%;
}
.bottom-nav .hzhb:hover {
background: url(../images/hzhb-logo-hover.png)0 no-repeat;
background-size: 36%;
}
.bottom-nav .xmjs {
background: url(../images/xmjs-logo.png)0 no-repeat;
background-size: 25%;
}
.bottom-nav .xmjs:hover {
background: url(../images/xmjs-logo-hover.png)0 no-repeat;
background-size: 25%;
}
.bottom-nav .tdjs {
background: url(../images/tdjs-logo.png)0 no-repeat;
background-size: 28%;
}
.bottom-nav .tdjs:hover {
background: url(../images/tdjs-logo-hover.png)0 no-repeat;
background-size: 28%;
}
.bottom-nav .gsfc {
background: url(../images/gsfc-logo.png)0 no-repeat;
background-size: 30%;
}
.bottom-nav .gsfc:hover {
background: url(../images/gsfc-logo-hover.png)0 no-repeat;
background-size: 30%;
}
.bottom-nav .xwzx {
background: url(../images/xwzx-logo.png)0 no-repeat;
background-size: 30%;
}
.bottom-nav .xwzx:hover {
background: url(../images/xwzx-logo-hover.png)0 no-repeat;
background-size: 30%;
}
.bottom-nav .zxns {
background: url(../images/zxns-logo.png)0 no-repeat;
background-size: 43%;
}
.bottom-nav .zxns:hover {
background: url(../images/zxns-logo-hover.png)0 no-repeat;
background-size: 43%;
}
.bottom-nav .lxwm {
background: url(../images/lxwm-logo.png)0 no-repeat;
background-size: 28%;
}
.bottom-nav .lxwm:hover {
background: url(../images/lxwm-logo-hover.png)0 no-repeat;
background-size: 28%;
}
.bottom-nav a {
font-size: 14px;
font-weight: bold;
color: #000;
width: 110px;
height: 50px;
line-height: 50px;
display: inline-block;
text-indent: 50px;
margin-left: 22px;
margin-right: 12px;
position: relative;
z-index: 999;
}
.bottom-nav a:hover {
color: #87209A;
}
.bottom-nav p {
font-size: 16px;
text-align: center;
margin-top: 30px;
color: #9C9C9C;
}
/*上面是联系我们部分*/
/*底部悬浮弹出小层部分*/
.about-pop {
width: 110px;
height: 245px;
text-align: center;
position: absolute;
z-index: 90;
left: 18px;
top: -180px;
background-color: #E8E8E8;
display: none;
}
.about-pop li {
height: 30px;
width: 100%;
line-height: 30px;
text-align: center;
margin-left: -22px;
}
.about-pop li a {
width: 110px;
height: 30px;
line-height: 30px;
display: inline-block;
text-indent: 0px!important;
}
.about-pop li:hover a {
color: #ffffff;
background-color: #88209B;
}
.gyhj:hover .about-pop {
display: block;
}
/*底部悬浮弹出小层部分*/
.color-red{
color: #E53333;
}
==========================
function getHtml(url){
var h = $('#boot').height();
$('#sonWp').load(url,function(){
$('#moku').animate({'top':-h},500);
});
}
function goBoot(){
$('#moku').animate({'top':0},500,function(){
$('#sonWp').html('');
});
}
/*这段是点击我们出现的悬浮层*/
$(function () {
$('#boot').height($(window).height());
$(".gyhj").mouseover(function () {
$(".about-pop").show();
});
$(".about-pop").mouseleave(function () {
$(".about-pop").hide();
});
});
/*这段是点击我们出现的悬浮层*/
=====================
