css - 下拉菜单链接不起作用

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 标签并修复一些问题:

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