使用选择选项元素创建弹出菜单

Question

具有以下简单结构：

<select>
  <option>Option1</option>
  <option>Option2</option>
  <option>Option3</option>
  <option>Option4</option>
  <option>Option5</option>
  <option>Option6</option>
  <option>Option7</option>
  <option>Option8</option>
  <option>Option9</option>
</select>

现在，我需要采用Option3，Option4，Option5和Option6，并将其置于具有弹出菜单样式的单个选项下，如下所示：

因此，从上面可以看到，我可以使用列表项来执行此操作，但是现有代码正在使用option元素，并且我希望对结构进行最少的更改。当然，如果无法避免，我会选择它，但是只是好奇是否可以对select / option进行同样操作。

请咨询。

Answer 1

HTML <select>无法做到这一点。您将需要使用呈现其自己的HTML元素的菜单库。

Answer 2

.menu {
  width:200px;
  position:relative;
}

.option {
  font-family:sans-serif;
  line-height:24px;
  background:#f0f0f0;
  padding:5px 10px;
}

.option:hover {
  background:#a0a0a0;
}

.option:nth-child(3){
  position:relative;
}

.menu2 {
  position:absolute;
  left:200px;
  width:100px;
  top:0;
  display:none;
}

.option:nth-child(3):hover .menu2 {
  display:block;
}

<div class="menu">
  <div class="option">Option 1</div>
  <div class="option">Option 2</div>
  <div class="option">New
    <div class="menu2">
      <div class="option">Option 3</div>
      <div class="option">Option 4</div>
      <div class="option">Option 5</div>
      <div class="option">Option 6</div>
    </div>
  </div>
  <div class="option">Option 7</div>
  <div class="option">Option 8</div>
  <div class="option">Option 9</div>
</div>