why hover effect for my ul is not working

October 3, 2023

i’m trying to make a menu that whene you hover on categories another menu opens beneath it.
i hav created both menu and the sub menu,but i don’t know how to make my sub menu appear on hover,or do any styling on it.
i tried using different selectors such as

nav li.categories:hover .categories-ul

.categories:hover .categories-ul

.categories:hover nav .categories-ul

but nothing works.what can i do?

.pc-nav-ul {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  backdrop-filter: hue-rotate(100deg) blur(5px);
}

.pc-nav-li {
  font-size: 1.5rem;
  font-family: var(--text-font);
  padding: 1rem;
  transition: 600ms;
}

.categories-ul {
  backdrop-filter: hue-rotate(140deg) blur(20px);
  padding: 0.7rem;
  border-radius: 1rem;
  width: 45rem;
  display: flex;
  justify-content: space-evenly;
  position: fixed;
  top: 5rem;
  z-index: 99999;
  transition: 600ms;
}

nav li.categories:hover .categories-ul {
  background-color: red;
}

.categories-li {
  font-family: var(--text-font);
  font-size: 1.2rem;
}

.pc-nav-li:hover:not(.categories-li) {
  letter-spacing: 2px;
}

<nav class="pc-nav">
  <ul class="pc-nav-ul">
    <li class="pc-nav-li"><a href="#">home</a></li>
    <li class="pc-nav-li categories"><a class="categories" href="#">categories</a>
    </li>
    <li class="pc-nav-li"><a href="#">setting</a></li>
    <li class="pc-nav-li"><a href="#">login/sign up</a></li>
  </ul>
  <ul class="categories-ul">
    <li class="categories-li"><a href="">entertainment</a></li>
    <li class="categories-li"><a href="">literature</a></li>
    <li class="categories-li"><a href="">science</a></li>
    <li class="categories-li"><a href="">programming</a></li>
    <li class="categories-li"><a href="">programming</a></li>
    <li class="categories-li"><a href="">programming</a></li>
  </ul>

</nav>

>Solution :

You can try using has():

.pc-nav-ul {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  backdrop-filter: hue-rotate(100deg) blur(5px);
}

.pc-nav-li {
  font-size: 1.5rem;
  font-family: var(--text-font);
  padding: 1rem;
  transition: 600ms;
}

.categories-ul {
  backdrop-filter: hue-rotate(140deg) blur(20px);
  padding: 0.7rem;
  border-radius: 1rem;
  width: 45rem;
  display: none;
  justify-content: space-evenly;
  position: fixed;
  top: 5rem;
  z-index: 99999;
  transition: 600ms;
}

.categories-li {
  font-family: var(--text-font);
  font-size: 1.2rem;
}

.pc-nav-li:hover:not(.categories-li) {
  letter-spacing: 2px;
}

.pc-nav:has(.categories:hover) .categories-ul {
  display: flex;
  background-color: red;
}

<nav class="pc-nav">
  <ul class="pc-nav-ul">
    <li class="pc-nav-li"><a href="#">home</a></li>
    <li class="pc-nav-li categories"><a class="categories" href="#">categories</a>
    </li>
    <li class="pc-nav-li"><a href="#">setting</a></li>
    <li class="pc-nav-li"><a href="#">login/sign up</a></li>
  </ul>
  <ul class="categories-ul">
    <li class="categories-li"><a href="">entertainment</a></li>
    <li class="categories-li"><a href="">literature</a></li>
    <li class="categories-li"><a href="">science</a></li>
    <li class="categories-li"><a href="">programming</a></li>
    <li class="categories-li"><a href="">programming</a></li>
    <li class="categories-li"><a href="">programming</a></li>
  </ul>

</nav>