答案：使用html和css创建水平导航菜单，通过:hover和position实现子菜单垂直下拉。主菜单用flex布局，子菜单绝对定位并默认隐藏，悬停时显示，支持背景、内边距和悬停样式，可扩展动画与响应式设计。
实现一个简单的下拉导航菜单，使用纯 HTML 和 CSS 就能完成，适合初学者练习。下面是一个基础但实用的下拉菜单示例，包含水平主菜单和垂直子菜单。
1. HTML 结构
先搭建基本的导航结构，使用 ul 和 li 标签构建菜单：
<nav class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">产品</a>
<ul class="dropdown">
<li><a href="#">电子产品</a></li>
<li><a href="#">服装</a></li>
<li><a href="#">图书</a></li>
</ul>
</li>
<li>
<a href="#">服务</a>
<ul class="dropdown">
<li><a href="#">技术支持</a></li>
<li><a href="#">客户咨询</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
2. 基础 CSS 样式
设置主菜单为横向排列，并隐藏子菜单（下拉部分）：
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #333;
display: flex;
}
<p>.navbar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
}</p><p>.navbar li {
position: relative;
}</p><p>/<em> 鼠标悬停时显示下拉菜单 </em>/
.navbar li:hover > .dropdown {
display: block;
}</p><p>/<em> 下拉菜单样式 </em>/
.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
min-width: 150px;
z-index: 1;
}</p><p>.dropdown li {
width: 100%;
}</p><p>.dropdown a {
padding: 12px 20px;
}</p><p>/<em> 下拉菜单悬停效果 </em>/
.dropdown a:hover {
background-color: #555;
}</p>3. 关键点说明
这个效果的核心在于利用 :hover 和 position 实现交互与定位：
立即学习“前端免费学习笔记（深入）”；
- display: flex 让主菜单水平排列
- position: relative 在父
- 上，确保子菜单能相对它定位
- position: absolute 使下拉菜单脱离文档流并定位在父项下方
- display: none / block 控制下拉菜单的显示与隐藏
- z-index 确保下拉菜单在其他内容之上
4. 扩展建议
你可以在此基础上添加更多视觉效果：
- 加入 transition 实现淡入动画
- 用 box-shadow 增加下拉菜单立体感
- 适配移动端时可改为点击展开（需 JavaScript）
基本上就这些，不复杂但容易忽略细节。只要结构清晰、定位准确，CSS 下拉菜单就能稳定工作。
