通过float布局和:hover伪类实现下拉导航菜单，1. 使用ul li结构构建导航，2. 用float:left使菜单水平排列，3. 子菜单绝对定位并默认隐藏，4. hover时显示子菜单，5. 可选opacity过渡动画提升体验。
要在CSS中实现浮动导航菜单，并通过 hover 触发下拉子菜单效果，核心是利用 float 布局、ul li 结构以及 :hover 伪类来控制子菜单的显示与隐藏。下面是一个简单实用的操作方法。
1. HTML结构：构建导航菜单
使用无序列表 ul 和列表项 li 创建主导航和下拉菜单结构：
<font face="Courier New" size="2">
<nav><ul class="nav">
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#">产品</a>
<ul class="sub-menu">
<li><a href="#">电子产品</a></li>
<li><a href="#">家居用品</a></li>
<li><a href="#">服装鞋帽</a></li>
</ul>
</li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul></nav></font>
2. CSS样式：浮动布局与基础样式
使用 float: left 让菜单项水平排列，隐藏子菜单默认不显示：
<font face="Courier New" size="2">
.nav {
list-style: none;
margin: 0;
padding: 0;
background: #333;
overflow: hidden;
}
<p>.nav > li {
float: left;
position: relative;
}</p>
<p>.nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 15px 20px;
}</p>
<p>.nav a:hover {
background: #555;
}</p>
<p>/<em> 隐藏下拉菜单 </em>/
.sub-menu {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
left: 0;
background: #444;
display: none; /<em> 默认隐藏 </em>/
min-width: 150px;
}</p>
<p>.sub-menu li a {
padding: 10px 20px;
border-bottom: 1px solid #555;
}
</p></font>
3. hover触发下拉菜单显示
当鼠标悬停在带有子菜单的 li 上时，使用 :hover 显示 .sub-menu：
<font face="Courier New" size="2">
.dropdown:hover .sub-menu {
display: block; /* 悬停时显示下拉菜单 */
}
</font>
这样，当用户将鼠标移到“产品”菜单项上时，子菜单会自动浮现出来。
4. 可选优化：添加过渡动画
为了让下拉更自然，可以改用 opacity 和 visibility 配合 transition 实现淡入效果：
<font face="Courier New" size="2">
.sub-menu {
...
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
<p>.dropdown:hover .sub-menu {
visibility: visible;
opacity: 1;
}
</p></font>
注意：使用 visibility + opacity 比 display 更适合动画，因为 display 不支持过渡效果。
基本上就这些。通过 float 布局让导航横向排列，再用 :hover 控制子菜单的出现，就能实现一个简洁的下拉导航菜单。虽然现代布局更多使用 flex，但在兼容性要求较高或简单项目中，float 仍是一种有效方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
