今天弄了好久，下拉的菜单怎么都点不到 。
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;width:50px;height:21px;padding-top:8px;z-index:10000;}
#tabs.tabsHover{width:48px;border-left:1px
solid #c7c7c7;border-right:1px solid #c7c7c7;}
#tab{ display:none;
width:82px;height:155px;border:1px solid
#c7c7c7;border-top:0;background-color:#fff;padding:6px
0px;position:absolute;top:28px;left:-1px;}
#tab
li{width:82px;height:26px;line-height:26px;float:left;text-align:center;color:#666;}
#tab
li
a{width: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状态。
最后终于解决 了。
顶部的单个下拉菜单或者 显示隐藏层,布布扣,bubuko.com
原文：http://www.cnblogs.com/bethel511/p/3583000.html