HTML / CSS嵌套菜单下拉列表

Question

我不了解如何为导航栏菜单创建嵌套下拉列表。我想使用按钮和div（而不是列表/链接/ bootstrap）。我在这里建造了一些我认为正确的东西，但当然我无法让它发挥作用。有人可以请我帮我拿下线＆amp;嵌套下拉列表工作：）

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;