如何实现CSS导航栏<li>元素鼠标悬停高亮效果？

要实现你要的效果，只需要调整CSS的hover目标，并让链接元素铺满整个列表项即可，下面是修改后的完整代码：

修改后的HTML（语义化微调） #

<nav>
  <ul class="nav-top">
    <li class="nav-item"><span class="logo">LoremX</span></li>
    <li class="nav-item"><a href="index.html">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item" id="contact"><a href="#">Contact</a></li>
  </ul>
</nav>

注：把非标准的<navbar>换成HTML5规范的<nav>标签，logo用<span>替代<label>更贴合语义。

修改后的CSS #

.nav-top {
  background: rgb(151, 138, 63);
  margin: 0;
  padding: 1rem 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav-item {
  list-style: none;
  margin-right: 1.2rem;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* 给导航项添加hover高亮，排除logo项 */
.nav-top .nav-item:hover:not(:first-child) {
  background: #F2F2F2;
}

/* 让a元素铺满整个li，实现点击li触发链接 */
.nav-item a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 5px 0;
}

/* hover时同步修改文字颜色 */
.nav-top .nav-item:hover:not(:first-child) a {
  color: #444444;
}

.nav-item:first-child {
  margin-right: auto;
  margin-left: 2rem;
  cursor: default;
}

关键改动说明 #

• li悬停高亮：将hover样式直接绑定到.nav-item，用:not(:first-child)排除logo项，添加border-radius模拟Stack导航的圆角高亮效果。
• li可点击：把<a>设为块级元素，让它占满整个<li>空间，用户点击li的任何区域都会触发链接跳转，视觉上就像li本身可点击。
• 清理冗余代码：删掉无效的.nav-top ul样式（.nav-top本身就是ul元素），简化代码结构。

内容的提问来源于stack exchange，提问作者Jonathan