如何使下拉100％宽度包含反应js中的另一个下拉？

Question

需要这种类型的下拉菜单和同一个下拉菜单中的另一个下拉菜单我在引导程序中尝试了使用导航栏的正常下拉方法，但我无法实现。

我的代码是：

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

我的风格是：

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

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

Answer 1

这是支持嵌套下拉列表的代码的修改版本。 根据您提供的屏幕截图，您希望它在单击而不是在 hover 上工作，为此您只需替换 css :hover并使用 React 挂钩来触发打开和关闭。

 .dropbtn { background-color: #4CAF50; width: 100%; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* The container <div> - needed to position the dropdown content */.dropdown { position: relative; width: 100%; display: inline-block; } /* Dropdown Content (Hidden by Default) */.dropdown-content { display: none; width: 100%; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropbtn_inside { color: black; cursor: pointer; background-color: #ffa; padding: 12px 16px; text-decoration: none; display: block; }.dropdown-content-inside { display: none; }.dropbtn_inside:hover >.dropdown-content-inside { display: block; }.dropdown:hover.dropdown-content { display: block; }

 <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <div class="dropbtn_inside"> Link 3 <div class="dropdown-content-inside"> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> </div> </div> </div>