Question

我构建了一个简单的列表并添加到它css。现在垂直菜单工作..问题出在CSS的部分。列表项区域大于链接本身。这意味着如果用户点击该区域，则没有任何反应，因为链接区域不会覆盖所有列表项目区域。

#sidebar1 li {
  list-style: none;
  position: relative;
  width: 120px;
  height: 30px;
  padding: 0 20px;
  background-color: black;
  line-height: 30px;
  cursor: pointer;
}

#sidebar1 li a {
  text-decoration: none;
  color: white;    
}

我想要做的是将链接填充或宽度与列表宽度匹配。因此，无论用户点击菜单项目的哪个位置，都会点击链接。多数民众赞成的问题是，我尝试了它，它没有工作

Answer 1

将大部分样式移动到A-tag并修改一些内容：

#sidebar1 li{
list-style: none;
position: relative;
margin:0 <-- added
padding:0  <-- added.
}

#sidebar1 li a{
text-decoration:none;
color: white;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
display:block <-- this is important
}

Answer 2

只需使用display: block使a元素填充父元素的可用水平宽度：

#sidebar1 li a{
    text-decoration:none;
    color: white;
    display: block;
    height: 100%;
}

height: 100%强制a继承父元素的完整高度。从父li移除填充，否则您将在a和li的边缘之间强制使用空格。

此外，在您的li中，我不仅删除了padding（这只是导致上述问题），还删除了cursor: pointer，就好像用户将鼠标悬停在链接光标会自动改变，如果它们没有通过链接，那么光标的类型pointer的类型只是在点击时产生无效的混淆：

#sidebar1 li {
    list-style: none;
    position: relative;
    width:120px;
    height: 30px;
    background-color: black;
    line-height: 30px;
}

下拉菜单链接不工作

2 个答案: