Html 将鼠标悬停在整个li上，而不是文本上

我试图在悬停时有一个链接，它将围绕整个li，而不仅仅是文本本身，如果你知道我的意思的话

如果我的CSS完全混乱，请提前道歉

CSS:

索引：

<div id="navi">
<ul class="ul">
    <li><a href="">Test 1</a></li>
    <li><a href="">Test 1</a></li>
    <li><a href="">Test 1</a></li>                      
</ul>
</div>

它看起来像什么：

这是将鼠标悬停在上方时的外观：

---

有什么建议吗？我只想让它绕着整个盒子转。谢谢

您可以使用div来代替普通链接。然后您可以将其背景颜色更改为悬停。

将链接设置为

块

，然后根据需要添加尽可能多的

填充。
为了获得更好的外观，我将从

#navi a {
  display: block;
  padding:.03em 1em;
  text-decoration: none;
}

示例：-对CSS进行了更多更改：

#navi {
  font-size:14px;
  text-transform:uppercase;
}

#navi ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

#navi li {
  float:left; 
}

#navi a {
  display: block;
  padding: 1em 1em;
  text-decoration: none;
}

#navi a:hover { 
  background-color: #e0e0e0;
}

或者添加一个
行高度
您可以设置


使用
#navi li:hover{
代替在display:block中设置a，并最终将高度调整为100%；
#navi {
  font-size:14px;
  text-transform:uppercase;
}

#navi ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

#navi li {
  float:left; 
}

#navi a {
  display: block;
  padding: 1em 1em;
  text-decoration: none;
}

#navi a:hover { 
  background-color: #e0e0e0;
}

#navi {
  font-size:14px;
  text-align:left;
  text-transform:uppercase;
  background:blue;
border-bottom:solid turquoise 5px;
}

#navi ul {
  padding:0 5px;/* send vertical padding into a tag */
  margin: 0;
}

#navi li {
  display:inline-block;   
}

#navi a {
  padding:5px 1em;/* apply here the vertical-padding */
  text-decoration: none;
  display:block;/* take all width and have no gaps at bottom */
  height:100%;
  color:white;
}

#navi a:hover { 
  background-color: #e0e0e0;
  color:black;
}