HTML/CSS Nested Menu Dropdowns

问题

I'm don't understand how to create nested dropdowns for a navbar menu. I would like to use buttons and divs (and not lists/links/bootstrap). I built something I think is correct here but of course I can't get it working. Could someone please help me get the dropdown & nested dropdown to work :)

.dropdown {
  background: white;
  float: left;
}

.dropdown .dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  visibility: hidden;
  opacity: 0;
}

.dropdown .dropdown .dropdown {
  left: 100%;
  top: 0;
}

button:hover {
  cursor: pointer;
  background-color: gray;
}

button:hover .dropdown {
  visibility: visible;
  opacity: 1;
}

button:hover .dropdown .dropdown {
  visibility: visible;
  opacity: 1;
}

<div class="dropdown">
  <button>Something Else</button>
  <div class="dropdown">
    <button>Something Else 1</button>
    <button>Something Else 2</button>
  </div>
</div>

<div class="dropdown">
  <button>Random Stuff</button>
  <div class="dropdown">
    <button>Random Stuff 1 ></button>
    <div class="dropdown">
      <button>Random Stuff 1.1</button>
      <button>Random Stuff 1.2</button>
    </div>
    <button>Random Stuff 2</button>
    <button>Random Stuff 3 ></button>
    <div class="dropdown">
      <button>Random Stuff 3.1</button>
      <button>Random Stuff 3.2</button>
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/49425587/html-css-nested-menu-dropdowns