导航栏横向子菜单Hover显示失效问题求助

嘿，我帮你排查了代码里的问题，马上就能搞定这个hover触发子菜单的bug！

你的代码里的核心问题 #

1. 子菜单样式里的paddin是拼写错误，应该是padding
2. 你提到用display: none隐藏子菜单，但代码里没写这行关键样式
3. 缺少父元素hover时触发子菜单显示的CSS选择器，这是让子菜单现身的核心逻辑

修正后的完整代码 #

body { 
  margin: 0; 
  padding: 0; 
  background: #eee; 
} 

.nav ul { 
  list-style: none; 
  margin: 200px 0 0 14px; 
  padding: 0; 
  /* 去掉overflow:hidden，不然会把绝对定位的子菜单裁切掉 */
  /* overflow: hidden; */
} 

.nav li { 
  float: left; 
  /* 给父li设置相对定位，让子菜单基于它定位 */
  position: relative;
} 

.nav a { 
  background-color: gray; 
  padding: 10px; 
  margin-right: 10px; 
  display: block; 
  /* 加个鼠标指针样式，提升交互体验 */
  cursor: pointer;
} 

/* SUBNAV 子菜单样式 */
.subnav ul { 
  list-style: none; 
  padding: 0; /* 修正拼写错误 */
  margin: 0;
  display: none; /* 默认隐藏子菜单 */
  /* 绝对定位，避免挤乱布局 */
  position: absolute;
  top: 100%; /* 子菜单贴在父元素底部 */
  left: 0;
}

.subnav ul li {
  float: none; /* 子菜单纵向排列，如果你要横向可以保留float:left */
  width: 100%;
}

.subnav ul li a {
  margin-right: 0; /* 去掉子菜单链接的右侧margin */
  background-color: #666; /* 区分父菜单和子菜单的背景色 */
}

/* 核心hover触发逻辑：父li hover时显示子菜单 */
.nav li:hover .subnav ul {
  display: block;
}

关键调整说明 #

• 去掉了.nav ul的overflow: hidden：不然绝对定位的子菜单会被父容器裁剪掉，看不到
• 给.nav li加了position: relative：让子菜单的绝对定位基于父li，不会乱跑
• 明确设置了子菜单的display: none默认隐藏
• 添加了.nav li:hover .subnav ul选择器：当鼠标悬停在父菜单项上时，子菜单就会显示出来
• 调整了子菜单的样式，让布局更合理（比如纵向排列、背景色区分）

你可以直接用这段代码测试，hover父菜单项就能看到子菜单正常显示啦！

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