我正在嘗試做一個簡單的導航條，我已經做好了基礎，但是當我嘗試個性化的時候，我卡住了。

我的目標是當鼠標經過每個元素(home等)時，它會像一個框一樣突出顯示，但是目前它只突出顯示& lta & gt我試過了，但沒有& lt李& gt拿著它。

我正在努力使& lt李& gt一個類似于stack的navbar的可以被點擊和高亮顯示的錨點。

.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;
}

.nav-top ul {
  margin: 0 auto;
  padding: 0;
  list-style: none
}

.nav-top li:hover {
  display: block
}

.nav-top a:hover {
  background: #F2F2F2;
  color: #444444;
}

.nav-item a {
  text-decoration: none;
  color: white;
  width: 100px;
}

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

.nav-item a:hover {
  color: aqua;
}

<navbar>
  <ul class="nav-top">
    <li class="nav-item"><label class="logo">LoremX</label></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>
</navbar>

您為li提供的唯一:hover聲明是display: block的默認值，而顏色更改聲明只為a提供。但是，我相信您試圖實現的效果可以通過使用填充使錨點成為塊級別來更好地實現。

與懸停效果無關，只是更正您的標記:

你有。導航頂部的用戶界面選擇器，但該示例不包括嵌套的用戶界面 我懷疑你誤用了標簽元素。 導航條不是一個HTML元素，我懷疑你想要導航

.nav-top {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: rgb(151, 138, 63);
}

.logo {
  margin-right: auto;
  margin-left: 2rem;
  padding: 5px 10px;
  align-self: center;
}

.nav-item {
  margin-right: 1.2rem;
  padding: 5px 10px;
}

.nav-item a {
  display: block;
  padding: .5em;
  text-decoration: none;
  color: white;
}

.nav-item a:hover {
  color: aqua;
  background: #F2F2F2;
}

<nav>
  <ul class="nav-top">
    <li class="logo">LoremX</li>
    <li class="nav-item"><a href="#">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>

只需在錨元素中添加填充和邊框

.nav-item a {
  text-decoration: none;
  color: white;
  width: 100px;
  padding: 10px;
  border-radius: 10px;
}