是否可以仅使用 HTML 和 CSS 使 <form><select> 列表在悬停时下拉？

Question

我想让这个表单的

select

列表在悬停时自动下拉，就像“布局...”按钮的菜单自动下拉一样，仅使用 HTML 和 CSS。我试过将按钮的 CSS 技巧复制到选项列表，但没有成功。可以吗？

.dropdown-content {
  display: none; /* don't drop down until time to show */
  position: absolute; /* keep button in-place */
  background-color: white; /* so items aren't see-through */
  border: 1px solid; /* dropdown outline */
}

.dropdown-content a { /* links inside the dropdown */
  text-decoration: none; /* avoid underlining */
  display: block; /* put each link on a line */
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover { background-color: rgb(200,235,255); }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content { display: block }

<div class="dropdown"><button class="dropbtn">Layout...</button>
  <div class="dropdown-content">
  <a href="small.html">Small</a>
  <a href="medium.html">Medium</a>
  <a href="large.html">Large</a>
  </div>
</div>

<p>

<form action="action.dll" method="GET">
  <input class="forminput" type="submit" value="Find:"> <input type="text" name="target" value=""> in 
    <select name="field" id="field">
    <option value = "Field1">Field1</option>
    <option value = "Field2">Field2</option>
    <option value = "Field3">Field3</option>
    </select>
</form>