Question

我的问题是第二级下拉列表不想工作。它始终显示 Random Stuff 3.x 按钮。关于如何使这个工作的任何想法？我觉得问题出在.dropdown-content:hover > .dropdown-content行。

我不想要使用list / links / bootstrap的解决方案，我需要一个带按钮和div的解决方案

.dropdown-content {
  position: relative;
  display: inline-block;
}

.dropdown-content .dropdown-content {
  display: none;
  position: absolute;
  min-width: 150px;
}

.dropdown-content .dropdown-content .dropdown-content {
  left: 100%;
  top: 0;
}

button {
  display: block;
  width: 100%;
}

.dropdown-content:hover>.dropdown-content {
  display: block;
}

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

Answer 1

试试这个：

.dropdown-content {
  position: relative;
  display: inline-block;
}

.dropdown-content .dropdown-content {
  display: none;
  position: absolute;
  min-width: 150px;
}

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

button {
  display: block;
  width: 100%;
}

.dropdown-content:hover {
    display: inline-block; // Helping showing own when hover.
}

// Key area
button:hover + .dropdown-content {
    display:block; 
}

HTML / CSS嵌套下拉列表

1 个答案: