今天弄了好久，下拉的菜单怎么都点不到 。
HTML代码是：
<div class="tabs" id="tabs">
<a href="#" id="help" class="help">帮助</a>
<div id="tab" class="tab">
<ul>
<li><a href="#">在线客服</a></li>
<li><a href="#">账号申诉</a></li>
<li><a href="#">反馈意见</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">新版介绍</a></li>
<li><a href="#">主题回顾</a></li>
</ul>
</div>
</div>
css代码：
<style>
body{ padding:100px;}
a{ font-size:12px; color:#666; text-decoration:none;}
ul,li{ list-style:none; }
*{ margin:0; padding:0; }
/**/
.help,.helpHover{ margin-left:8px; padding-right:11px; background:url(icobg_1.4.png) no-repeat; }
.help{ background-position:right -115px; }
.helpHover{ background-position:right -145px; }
#tabs{ position:relative;50px;height:21px;padding-top:8px;z-index:10000;}
#tabs.tabsHover{48px;border-left:1px solid #c7c7c7;border-right:1px solid #c7c7c7;}
#tab{ display:none; 82px;height:155px;border:1px solid #c7c7c7;border-top:0;background-color:#fff;padding:6px 0px;position:absolute;top:28px;left:-1px;}
#tab li{82px;height:26px;line-height:26px;float:left;text-align:center;color:#666;}
#tab li a{82px;height:26px;line-height:26px;text-align:center;display:block;color:#666;}
#tab li a:hover{background:#f4f8fc;color:#2d374b;}
</style>
然后js代码：
<script type="text/javascript">
window.onload=function(){
var help=document.getElementById("help");
var tab=document.getElementById("tab");
help.onmouseover=function(){
this.className="helpHover";
tab.style.display="block";
};
help.onmouseout=function(){
this.className="help";
tab.style.display="none";
};
};
</script>
在网上找了很多的解决办法。
说是 中间有间隙所以点击不到，我把所有的间隙都弄没了，但是还是点不到。
点击“帮助”的时候，可以显示下拉菜单，但是当我想点击“帮助中心”的时候，却点击不过去。
试了很多的办法，最后终于找到了原因了。
原来不是 a 上的hover状态，
而是 整个div 上面的hover状态。
最后终于解决 了。