в css файле не работает псевдокласс hover

Question

Создал меню, хотелось бы, чтобы при наведении на один из его пунктов, он менял цвет цвет примерно как на фото, но псевдокласс hover почему-то отказывается работать. Может где-то что-то не доглядел? Подскажите пожалуйста

html,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Playfair Display', serif;
}


/*-----------------------------------------------------------------------------------*/


/* MENU
/*-----------------------------------------------------------------------------------*/

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #5d4954
}

.logo {
  color: #EBD7FF;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 20px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 30%;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: #EBD7FF;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: 500;
  font-size: 14px;
}

.nav-links ul:hover {
  background-color: #826675;
}

@media screen and (max-width:1024px) {
  .nav-links {
    width: 70%;
  }

<body>
  <!--NAV BAR-->
  <nav>
    <div class="logo">
      <h4>The Nav</h4>
    </div>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>

</html>

БЛОГ НА HUSL

в css файле не работает псевдокласс hover

Ответы (0 шт):