在单击时显示下拉菜单，而不是在悬停时显示

在前端开发中，实现在单击时显示下拉菜单而不是在悬停时显示，可以通过以下步骤实现：

1. HTML结构：创建一个包含下拉菜单选项的HTML元素，通常使用<select>和<option>标签来实现。例如：

<select id="dropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

1. CSS样式：使用CSS样式来隐藏下拉菜单，并设置一个自定义的样式来替代默认的下拉菜单样式。例如：

#dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('custom-dropdown-icon.png') no-repeat right center;
  padding-right: 20px;
}

#dropdown::-ms-expand {
  display: none;
}

上述代码中，appearance和-webkit-appearance用于移除默认的下拉菜单样式，-moz-appearance用于兼容Firefox浏览器。background属性用于设置自定义的下拉菜单图标，padding-right用于给图标留出空间，::-ms-expand用于隐藏IE浏览器的默认下拉箭头。

1. JavaScript交互：使用JavaScript来实现在单击时显示下拉菜单的功能。可以通过监听点击事件，在点击时显示下拉菜单选项。例如：

var dropdown = document.getElementById("dropdown");

dropdown.addEventListener("click", function() {
  this.size = this.size === 1 ? this.options.length : 1;
});

上述代码中，通过addEventListener方法监听下拉菜单的点击事件，当点击时，将下拉菜单的size属性设置为选项的数量，以展开下拉菜单。再次点击时，将size属性设置为1，以折叠下拉菜单。

这样，当用户单击下拉菜单时，就会显示所有选项，再次单击则会折叠起来。

这是一个简单的实现方式，如果需要更复杂的下拉菜单功能，可以结合使用CSS和JavaScript来实现。腾讯云提供了丰富的云计算产品和服务，可以根据具体需求选择适合的产品。详细的产品介绍和文档可以在腾讯云官方网站上找到。