Nested Dropdown opens automatically when I open parent dropdown

I created multilevel dropdown in bootstrap 5 but when i hover on parent dropdown it automatically child dropdown.

<li class="nav-item dropdown"><a class="nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#" style="color: rgb(255,255,255);font-size: 0.875rem;font-weight: bold;font-family: Roboto, sans-serif;text-align: center;">Canvas &amp;<br />Surfaces</a>
    <div class="dropdown-menu" style="border-radius: 0px;margin: 7px 0px 0px;">
        <div class="nav-item dropend"><a class="dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" href="#">Dropdown </a>
            <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
        </div><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a>
    </div>
</li>

CSS

.dropdown:hover > .dropdown-menu {
  display: block;
  margin-top: 0.125em;
  margin-left: 0.125em;
}

.dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0.125em;
  margin-left: 0.125em;
}

@media screen and (min-width: 769px) {
  .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
  }
}

@media screen and (min-width: 769px) {
  .dropend .dropdown-toggle {
    margin-left: 0.5em;
  }
}

I want to create a multilevel dropdown which opens on hover.