Why my dropdown menu don't work? (HTML&CSS)

Question

Problem: I am a beginner in HTML&CSS and I need help with dropdown menu. I was following tutorials on YouTube, but same problem is repeating. After I put my mouse over "Categories" item, hover function doesn't work.

nav {
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 30%);
  align-items: center;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
}

nav ul {
  float: right;
  margin-right: 40%;
}

nav ul li {
  display: inline-block;
  line-height: 40px;
  margin-top: 15px;
}

nav ul li a {
  padding: 13px 10px;
  background: rgba(0, 0, 0, 20%);
  color: white;
}

nav ul ul {
  position: absolute;
  display: none;
}

nav ul li:hover>ul {
  display: block;
}

<div>
  <nav>
    <label class="logo">LOGO</label>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Categories</a></li>
      <ul>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
        <li><a>Category</a></li>
      </ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

Answer 1

It's because your HTML is just slightly invalid. Your nested unordered list (<ul>) needs to come within a list item (<li>), but yours is outside of it. Fix that and it seems to work.

nav {
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 30%);
  align-items: center;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
}

nav ul {
  float: right;
  margin-right: 40%;
}

nav ul li {
  display: inline-block;
  line-height: 40px;
  margin-top: 15px;
}

nav ul li a {
  padding: 13px 10px;
  background: rgba(0, 0, 0, 20%);
  color: white;
}

nav ul ul {
  position: absolute;
  display: none;
}

nav ul li:hover>ul {
  display: block;
}

<div>
  <nav>
    <label class="logo">LOGO</label>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Categories</a> <!-- remove the </li> you had here... -->
        <ul>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
        </ul>
      </li> <!-- ...and put it here -->
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>