如何只用css和HTML实现

如果你想仅使用CSS和HTML来实现一个简单的下拉菜单，可以利用CSS的`position: relative`、`display: none` 和 `:hover` 选择器。以下是步骤和示例代码：

1. 首先，在HTML里定义基本元素：

<nav id="menu">
  <ul>
    <li><a href="#" class="nav-link">首页</a></li>
    <li><a href="#" class="nav-link">简介</a></li>
    <li><a href="#" class="nav-link">合作意向</a></li>
    <li class="dropdown">
      <input type="text" placeholder="输入框">
      <ul class="dropdown-content">
        <li>事件1</li>
        <li>事件2</li>
        <li>事件3</li>
      </ul>
    </li>
  </ul>
</nav>

注意在最后一个`li`标签内嵌套了一个`ul`，用于存放下拉列表。

2. 接着，用CSS设置样式：

/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  width: 100%;
}

.nav-link {
  display: block;
  padding: 10px;
  text-decoration: none;
}

.dropdown-content {
  position: absolute;
  top: 100%; /* 下拉列表距离当前元素底部的距离 */
  left: 0;
  display: none; /* 初始时下拉列表隐藏 */
  background-color: #f9f9f9;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content li {
  cursor: pointer;
}

.dropdown:hover .dropdown-content { /* 当鼠标悬停在包含下拉列表的元素上时 */
  display: block;
}

.dropdown-content li:hover {
  background-color: gray; /* 鼠标悬停时更改背景色 */
}

这里的关键点在于设置了`.dropdown-content`的初始状态为`display: none`，当`li`拥有`.dropdown`类且其父元素被鼠标悬停时，使用`:hover`选择器使其显示。