如何在CSS中实现下拉菜单定位_Position absolute与ul li hover实践案例

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中实现下拉菜单定位_Position absolute与ul li hover实践案例

2025-11-20

浏览次数：次

返回列表

使用CSS的position和:hover实现下拉菜单：通过父级li设置relative定位，子菜单absolute定位并默认隐藏，hover时显示，结合box-shadow、z-index等优化体验，无需J*aScript即可完成交互。

如何在css中实现下拉菜单定位_position absolute与ul li hover实践案例

在网页设计中，下拉菜单是常见的交互元素。使用 CSS 的 position: absolute 结合 ul li:hover 可以实现简洁高效的下拉菜单效果，无需 J*aScript。下面通过一个实践案例详细说明如何实现。

基本HTML结构

下拉菜单通常基于无序列表（ul）构建，主菜单为一级列表项，子菜单嵌套在其中：

<ul class="n*bar">
  <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></li>
</ul>

CSS关键样式设置

核心在于父级 li 设置相对定位，子菜单使用绝对定位并默认隐藏，通过 hover 触发显示。

父级 li 使用 position: relative：为子菜单提供定位参考点。
子菜单 ul 使用 position: absolute：脱离文档流，相对于父级精确定位。
默认隐藏子菜单：通过 display: none 实现。
hover 时显示：当鼠标悬停在父级 li 上时，子菜单 display 改为 block。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

.n*bar {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #333;
  overflow: hidden;
}
<p>.n*bar > li {
float: left;
position: relative; /<em> 关键：建立定位上下文 </em>/
}</p><p>.n*bar a {
display: block;
color: white;
text-decoration: none;
padding: 14px 20px;
}</p><p>.dropdown {
position: absolute; /<em> 相对于父级 li 定位 </em>/
top: 100%; /<em> 紧贴父菜单下方 </em>/
left: 0;
background: #444;
list-style: none;
padding: 0;
margin: 0;
width: 180px;
display: none; /<em> 默认隐藏 </em>/
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}</p><p>/<em> 鼠标悬停时显示下拉菜单 </em>/
.n*bar > li:hover .dropdown {
display: block;
}</p><p>.dropdown li a {
padding: 12px 15px;
border-bottom: 1px solid #555;
}</p><p>.dropdown li:last-child a {
border-bottom: none;
}</p>