如何在子元素上维持悬浮状态？纯CSS实现导航栏下拉

需求与问题 #

我有一个导航栏，想要实现包含附加信息和额外链接的下拉菜单，并且菜单要和标签完美对齐（因此希望将信息元素作为子元素而非独立元素）。目前遇到的问题是：不分离元素的情况下，鼠标移至下拉链接时无法保持悬浮状态。请问能否仅用纯CSS实现该效果？

原始HTML代码 #

<div class="navbar">
  <ul>
    <li><a href="">about us</a></li>
    <li><a href="">rules</a></li>
    <li>
      <div class="glossary navlink">
        <a href="">glossary</a>

        <div class="dd-glossary">
          <div class="dd-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae ornare metus, vel scelerisque justo. Quisque et justo vel massa imperdiet cursus.</p>
            <a href="">link</a>
            <a href="">link</a>
            <a href="">link</a>
          </div>
        </div>
      </div>
    </li>
    <li><a href="">forum</a></li>
    <li><a href="">gallery</a></li>
  </ul>
</div>

原始CSS代码 #

body {
  margin: 0;
}

.navbar {
  background: #1d1d1d;
  color: #efeeeb;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.navlink {
  display: inline;
}

.navbar ul {
  margin: auto;
  padding: 10px;
}

.navbar li {
  display: inline;
  list-style: none;
  padding: 10px;
}

.navbar a {
  text-decoration: none;
  color: #efeeeb;
  transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
}

.navbar a:hover {
  color: yellow;
}

.glossary {
  position: relative;
}

.dd-glossary {
  display: none;
  position: absolute;
  background: #242424;
  z-index: -10;
  left: -10px;
  top: -10px;
  width: 300px;
  padding: 10px;
}

.dd-glossary:hover,
.glossary:hover .dd-glossary {
  display: block;
  transition-duration: 1s;
}

.dd-content {
  margin-top: 40px;
}

纯CSS解决方案 #

问题分析 #

1. 层级设置错误：.dd-glossary的z-index: -10会让下拉菜单处于导航栏下方，鼠标无法真正触碰到下拉菜单区域，导致悬浮状态丢失。
2. 空白间隙中断hover：.dd-content的margin-top:40px让下拉菜单和父元素之间存在空白，鼠标从导航项移至下拉菜单时会经过空白区域，触发父元素hover状态消失。
3. 动画属性无效：试图给display属性加transition无效果，因为display是离散属性，不支持平滑过渡。

修改后的完整CSS代码 #

body {
  margin: 0;
}

.navbar {
  background: #1d1d1d;
  color: #efeeeb;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.navlink {
  display: inline;
}

.navbar ul {
  margin: auto;
  padding: 10px;
}

.navbar li {
  display: inline-block; /* 改为inline-block，优化子元素布局 */
  list-style: none;
  padding: 10px;
}

.navbar a {
  text-decoration: none;
  color: #efeeeb;
  transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
}

.navbar a:hover {
  color: yellow;
}

.glossary {
  position: relative;
  padding: 10px 0; /* 扩大hover触发区域，提升交互体验 */
}

.dd-glossary {
  position: absolute;
  background: #242424;
  left: -10px;
  top: calc(100%); /* 下拉菜单与父元素底部对齐，消除间隙 */
  width: 300px;
  padding: 10px;
  /* 用opacity和visibility实现平滑过渡，替代display */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.glossary:hover .dd-glossary {
  opacity: 1;
  visibility: visible;
}

.dd-content {
  margin-top: 0; /* 移除顶部margin，避免空白间隙 */
}

关键修改说明 #

• 调整元素显示类型：将.navbar li的display: inline改为inline-block，让li能更好地容纳相对定位的子元素，避免布局偏移。
• 修复层级问题：移除.dd-glossary的z-index: -10，确保下拉菜单处于页面上层，能被鼠标正常触发hover。
• 消除空白间隙：修改.dd-glossary的top值为calc(100%)，并移除.dd-content的margin-top:40px，保证下拉菜单与导航项无缝衔接，避免鼠标移过时中断hover状态。
• 实现平滑过渡：用opacity和visibility替代display实现下拉菜单的显示/隐藏动画，这两个属性支持transition过渡效果，提升交互流畅度。
• 扩大触发区域：给.glossary增加上下内边距，扩大hover触发范围，减少操作失误概率。

内容的提问来源于stack exchange，提问作者Narl