Need help personalizing my CSS navbar: how do I highlight the <li> element on mouseover?

I am trying to make a simple navbar I managed to make the base but when I try to personalize I am getting stuck.

My objective is that when the mouse goes over each element(home, etc) it highlights like a box, but currently it only highlights the <a> I tried and not the <li> holding it.

I'm trying to make the <li> an anchor that can be clicked and highlighted similar to stack's navbar.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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;
}

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->

The only :hover declaration you have for li is the default value of display: block while the color change declarations are made only for a. However, the effect that I believe you are trying to achieve is better accomplished by making the anchors block-level with padding.

Not related to the hover effect, just correcting your markup:

• You have .nav-top ul selector but the example doesn't include a nested ul
• I suspect that you are misusing the label element.
• navbar is not an HTML element and I suspect you want nav

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->

just add padding and a border in an anchor element

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