js制作的鼠标悬浮时产生的下拉框效果

要实现鼠标悬浮时产生的下拉框效果，你可以使用HTML、CSS和JavaScript结合来完成。以下是一个简单的示例，展示了如何制作这样的效果。

**HTML**:

<div class="dropdown">
  鼠标悬浮这里
  <div class="dropdown-content">
    <p>链接 1</p>
    <p>链接 2</p>
    <p>链接 3</p>
  </div>
</div>

**CSS**:

/* 下拉框样式 */
.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* 下拉内容的样式，默认隐藏 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 链接样式 */
.dropdown-content p {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 鼠标悬浮在dropdown上时显示下拉内容 */
.dropdown:hover .dropdown-content {
  display: block;
}

**JavaScript**:

在这个示例中，我们主要使用CSS来实现鼠标悬浮效果，因此JavaScript部分不是必需的。但是，如果你想通过JavaScript来动态添加或修改下拉框的内容，你可以使用类似以下的代码：

// 假设你想在运行时添加一个链接
function addLink(dropdownId, linkText) {
  var dropdownContent = document.getElementById(dropdownId + '-content');
  var newLink = document.createElement('p');
  newLink.textContent = linkText;
  dropdownContent.appendChild(newLink);
}

// 调用函数，假设你的dropdown的id是'myDropdown'
// addLink('myDropdown', '动态添加的链接');

// 注意：上面的HTML中dropdown没有id，如果你需要使用JavaScript操作它，需要给它添加一个id，如：<div class="dropdown" id="myDropdown">

请注意，为了使用JavaScript中的`getElementById`函数，你需要在HTML中的`