html - 如何使整个 <li> 元素成为一个链接？

Question

我无法使整个 li 元素可点击。我试过显示属性，但没有任何帮助。这是一个代码:

#top_menu ul li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
}

#top_menu ul li a {
  display: block;
  padding: 0 14px;
  margin: 6px 0;
  line-height: 28px;
  text-decoration: none;
  color: #fff;
}

#top_menu ul li:hover>a {
  color: #8fde62;
}

#top_menu ul ul {
  position: absolute;
  opacity: 0;
  background: rgba(70, 70, 70, 0.7);
}

#top_menu ul li:hover>ul {
  opacity: 1;
}

#top_menu ul ul li {
  height: 0;
  overflow: hidden;
  padding: 0;
}

#top_menu ul li:hover>ul li {
  height: 36px;
  overflow: visible;
  padding: 0;
}

#top_menu ul ul li a {
  padding: 4px 0 4px;
  margin: 0;
  border: none;
  border-bottom: 1px solid #353539;
}

<ul>
  <li><a href="#">Additional</a>
    <ul>
      <li><a href="#">Commands</a></li>
      <li><a href="#">Guides</a></li>
    </ul>
  </li>
</ul>

结果如下(列表左侧有空白-未激活):

那我做错了什么？我该如何解决？

Answer 1

左边的填充是由 <ul> 引起的.如果将其设置为 padding: 0; ，这将删除空空间并允许您根据需要从 <li> 设置样式或 <a>

Example