请检查这个小提琴：http: //jsfiddle.net/cZTjd/1/
我需要使下拉列表完全可点击。目前，只有当我们点击文本而不是同一链接的其他部分时，它才会打开链接。某些列表项可能只包含一两个字母。所以如果我们只允许点击文本是不好的。有没有办法在不改变锚标签位置和简单地编辑css的情况下解决这个问题？
.top-header{
height:40px;
background:#383838;
padding:0 30px;
}
.top-active-link{
height: 39px;
background: #545454;
padding: 12px;
}
.top-header-links-right .simple{color:#fff;}
.top-header-links-right .simple:hover{text-decoration:none;}
.top-header-links-right{
float:right;
position:relative;
top:-15px;
}
.top-header-links-left{
list-style:none;
float:left;
position:absolute;
line-height:8px;
left:-10px;
top:-15px;
z-index:999;
}
.top-header-links-left li a:hover{
text-decoration:none;
}
.top-header-links-left li:hover >.top-header-links-left-drop ul{
display:block;
}
.top-header-links-right li:hover >.top-header-links-right-drop ul{
display:block;
}
.top-header-links-left .top-header-links-left-drop, .top-header-links-left .top-header-links-right-drop{
z-index:99;
}
.top-header-links-left .top-header-links-left-drop ul{
padding:0;
z-index:99;
display:none;
position:absolute;
background:#383838;
list-style:none;
width:200px;
box-shadow: 0px 1px 3px #C2C2C2;
border-radius: 0;
top:39px;
margin-left:-5px;
}
.top-header-links-right .top-header-links-right-drop ul{
padding:0;
z-index:99;
display:none;
position:absolute;
background:#383838;
list-style:none;
width:200px;
box-shadow: 0px 1px 3px #C2C2C2;
border-radius: 0;
top:39px;
right:95px;
}
.top-header-links-left .top-header-links-left-drop ul li, .top-header-links-right .top-header-links-right-drop ul li{
padding:0;
height:30px;
line-height:30px;
}
.top-header-links-left .top-header-links-left-drop li, .top-header-links-right .top-header-links-right-drop li{
list-style:none;
border-bottom:1px solid #4B4B4B;
display:list-item;
width:100%;
}
.top-header-links-left .top-header-links-left-drop li:hover, .top-header-links-right .top-header-links-right-drop li:hover{
background:#545454;
cursor:pointer;
}
.top-header-links-left .top-header-links-left-drop li a, .top-header-links-right .top-header-links-right-drop li a{
position:relative;
left:10px;
padding:3px;
color:#fff;
line-height:30px;
}
.top-header-links-left .top-header-links-left-drop li:hover, .top-header-links-right .top-header-links-right-drop li:hover{
text-decoration:none;
}
.blog-count{
position: relative;
height: 12px;
width: 8px;
border-radius: 2px;
background: #6CB535;
top: -5px;
left: 3px;
color: white;
font-size: 11px;
line-height: 12px;
padding-left: 3px;
display: inline-block;
}
.blog-count a{
color:#fff;
text-decoration:none;
}
.blog-count:hover{
cursor:pointer;
background:#549b1e;
}
.top-header-links-right ul{
list-style:none;
line-height:8px;
position: relative;
right: -20px;
}
.top-header-links-left li, .top-header-links-right li{
float:left;
color:#fff;
text-transform:uppercase;
font-size:11px;
margin-right:20px;
letter-spacing:1px;
-webkit-transition: text-shadow 0.2s linear;
-moz-transition: text-shadow 0.2s linear;
-ms-transition: text-shadow 0.2s linear;
-o-transition: text-shadow 0.2s linear;
transition: text-shadow 0.2s linear;
height:39px;
line-height:40px;
width:auto;
padding:0 5px;
cursor:pointer;
}
.top-header-links-right li{
height:39px;
line-height:39px;
}
.top-header-links-left a, .top-header-links-right a{
color:#fff;
text-decoration:none;
}
.top-header-links-left li:hover, .top-header-links-right li:hover{
text-decoration:none;
background:#545454;
}
.top-header-links-right li:last-child:hover{
background:#6bb533;
}
.top-header-links-right .top-header-links-right-drop ul li:last-child:hover{
background:#545454;
}
</p>
<div class="top-header">
<ul class="top-header-links-left">
<li><a href="#">tools</a>
<div class="top-header-links-left-drop">
<ul>
<li><a href="#">go.htm file</a></li>
<li><a href="#">simple bookmarlet</a></li>
<li><a href="#">sidebar</a></li>
<li><a href="#">import links (beta)</a></li>
<li><a href="#">API</a></li>
</ul>
</div>
</li>
<li><a href="#">blog</a>
<span class="blog-count"><a href="#">9</a></span>
</li>
<li><a href="#">settings</a></li>
<li><a href="#">support</a></li>
</ul>
</div>