создать всплывающее меню, используя элементы выбора

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

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

Answer 2

HTML <select> не может этого сделать.Вам нужно будет использовать библиотеку меню, которая отображает свои собственные элементы HTML.