HTML 和 JavaScript 实现悬浮下拉选项

<div id='hoverDiv' onmouseover='showOptions()' onmouseout='hideOptions()'>悬浮的 div</div>
<div id='optionsDiv' style='display: none;'>
  <select>
    <option>选项 1</option>
    <option>选项 2</option>
    <option>选项 3</option>
  </select>
</div>
<script>
function showOptions() {
  document.getElementById('optionsDiv').style.display = 'block';
}

function hideOptions() {
  document.getElementById('optionsDiv').style.display = 'none';
}
</script>
<p>该示例通过定义一个悬浮的 div 元素，并设置 onmouseover 和 onmouseout 事件来实现下拉选项的显示和隐藏。当鼠标悬浮在 div 上时，showOptions() 函数会将下拉选项 div 的 display 属性设置为 block，使其显示出来。当鼠标离开时，hideOptions() 函数会将其设置为 none，使其隐藏起来。</p>