Dropdown menu to the right

Question

When you move the cursor over the "Catalog" button, sub-items drop down. However, when you hover over the "Clothes" sub-item, the pop-up menu to the right does not appear and in general something goes wrong. Why?

.dropdown {
  position: absolute;
  /* margin: -60px 0 0 200px; */
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: greenyellow;
  padding: 15px;
  border-radius: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropright-content {
  position: absolute;
  top: 0;
  left: 0px;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropright-content a {
  background-color: #f1f1f1;
}

.dropright-content a:hover {
  background-color: #ddd;
}

.dropright:hover .dropright-content {
  display: block;
}

<div class="dropdown">
  <div class="dropbtn">≡ Catalog</div>
  <div class="dropdown-content"><a href="#">Clothes</a>
    <div class="dropright-content">
      <a href="#">Men's clothing</a>
      <a href="#">Women's clothing</a>
    </div>
    <a href="#">Electronics</a>
    <a href="#">Books</a>
  </div>
</div>

Answer 1

Firstly, your drop-right content can't have left: 0. This places it directly over the first menu level.

Then, your hover selector was off. It needs to be something like .dropdown-content a:hover+.dropright-content, because there's a sibling relationship.

That's a problem, though, since once you leave the hovered anchor the sibling hides. So we need to restructure to create a child relationship. Something like this:

.dropdown {
  position: absolute;
  /* margin: -60px 0 0 200px; */
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: greenyellow;
  padding: 15px;
  border-radius: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropright-content {
  position: absolute;
  top: 0;
  left: 100%;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: none;
}

.dropright-content a {
  background-color: #f1f1f1;
}

.dropright-content a:hover {
  background-color: #ddd;
}

.inner-dropdown:hover .dropright-content {
  display: block;
}

<div class="dropdown">
  <div class="dropbtn">≡ Каталог</div>
  <div class="dropdown-content">
    <div class="inner-dropdown">
      <a href="#">Одежда</a>
      <div class="dropright-content">
        <a href="#">Мужская одежда</a>
        <a href="#">Женская одежда</a>
      </div>
    </div>
    <a href="#">Электроника</a>
    <a href="#">Книги</a>
  </div>
</div>

CSS dropdowns have been used and discussed for ages. You might look into one of the many good examples to see how you can simplify your structure and CSS. Ideally you don't have separate style rules for the outer and inner drop panels.