如何给超链接列表

请检查该提琴：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; 
}

<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>

来源

2012-11-27 user1012181

该A必须是一个块元件，以便能够设置一个高度/宽度。下面的代码应该做你想要的。

li a { 
    display: inline-block; 
    height: 100%; 
    width: 100%; 
}

来源

2012-11-27 09:35:26

设置你的a的width和height，以配合您li的width和height，所以它填充列表项的整个区域。

然后将整个区域连接起来。

来源

2012-11-27 09:30:36 Curt

尝试是这样的：

li a { 
    width: 100%; 
    height: 100%; 
    float: right; 
}

来源

2012-11-27 09:33:13 lvil

top:-15px删除从.top-header-links-left

DEMO

来源

2012-11-27 09:54:03 Sowmya

如何给超链接列表

回答

相关问题