答案：使用position: absolute与:hover结合可实现纯CSS下拉菜单。1. 父元素设为position: relative，子菜单用position: absolute定位；2. 子菜单默认通过visibility: hidden和opacity: 0隐藏；3. 利用:hover触发子菜单的visibility: visible和opacity: 1，实现淡入显示；4. 配合transition添加过渡效果，提升体验。关键点在于relative/absolute定位配合visibility控制显隐，避免使用display: none导致无法交互。
使用CSS中的
和
可以轻松实现下拉菜单效果，无需JavaScript。关键是将子菜单定位在父元素下方，并通过悬停控制显示与隐藏。
基本结构：HTML布局
下拉菜单通常由一个父级菜单项和一个隐藏的子菜单组成。子菜单默认不显示，鼠标悬停时出现。
CSS关键样式：absolute定位与hover触发
通过设置父容器为
，子菜单使用
进行精确定位，并利用
控制显示。
核心要点说明
要让下拉菜单稳定可用，注意以下几个细节：
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
立即学习
“
前端免费学习笔记（深入）
”；
relative + absolute 配合
：父元素设为
，子元素
才能相对于它定位
top: 100%
：确保菜单出现在父元素正下方，不留缝隙
visibility + opacity
：比
更适合配合过渡动画
transition
：添加淡入淡出效果，提升用户体验
避免点击穿透
：不要用
，否则无法点击到菜单项
基本上就这些，掌握好定位和状态切换，就能做出简洁实用的纯CSS下拉菜单。
position: absolute:hover
position: relativeposition: absolute:hover
.navbar {
list-style: none;
padding: 0;
background: #333;
}
.navbar > li {
position: relative; / 关键：为子菜单提供定位上下文 /
display: inline-block;
}
.dropdown-trigger {
color: white;
padding: 10px 15px;
display: block;
cursor: pointer;
}
.dropdown-menu {
position: absolute;
top: 100%; / 紧贴父元素下方 /
left: 0;
background: #444;
list-style: none;
padding: 0;
margin: 0;
min-width: 150px;
opacity: 0;
visibility: hidden; / 隐藏但保留占位 /
transition: opacity 0.2s ease;
}
/ 悬停时显示下拉菜单 /
.navbar > li:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
.dropdown-menu li a {
color: white;
text-decoration: none;
display: block;
padding: 10px 15px;
}
.dropdown-menu li a:hover {
background: #555;
}
relativeabsolutedisplay: none/blockdisplay: none