html与js实现悬浮在div后出现下拉选项

可以使用HTML与JavaScript来实现悬浮在div后出现下拉选项的效果。以下是一个简单的示例：

HTML代码：

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

JavaScript代码：

function showOptions() {
  document.getElementById("optionsDiv").style.display = "block";
}

function hideOptions() {
  document.getElementById("optionsDiv").style.display = "none";
}

在上面的示例中，我们首先定义了一个悬浮的div元素，并给它设置了onmouseover和onmouseout事件，分别用于在鼠标悬浮和离开时触发对应的函数。

在JavaScript代码中，showOptions()函数会将下拉选项的div元素的display属性设置为block，使其显示出来，而hideOptions()函数则会将其设置为none，使其隐藏起来。

通过这样的方式，当鼠标悬浮在div上时，下拉选项会显示出来，当鼠标离开时，下拉选项会隐藏起来