下拉菜单链接不起作用

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
}

Answer 2

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

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

height: 100% 强制 a 元素填充父元素的可用水平宽度： >a 继承父元素的完整高度。删除父 li 中的内边距，否则您将在 a 和 li 的边缘之间强制留出空格。

此外，在您的 li 中，我不仅删除了 padding（这只会导致如上所述的问题），还删除了 cursor:pointer ，就像用户将鼠标悬停在链接上一样，光标会自动更改，如果用户不在链接上，则光标的类型（指针的类型）在单击时不会产生任何效果，这只是令人困惑：

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