CSS实现下拉菜单悬停仅显示空框无链接内容问题求助

错误定位 #

• 核心逻辑缺失：仅设置了子菜单.contain ul ul默认隐藏，未编写父级li悬停时显示子菜单的样式规则
• 属性冲突：顶级ul同时设置position: relative和position: absolute，最终绝对定位导致布局错位，额外设置的top: 150px、overflow-y: hidden也会遮挡子菜单内容
• 语法错误：子菜单height: 40未加单位，属性不生效
• 布局异常：父级li悬停时修改宽高，会导致整体导航栏错位，且子菜单未设置偏移量，位置异常

修复后代码 #

CSS部分 #

.contain ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 999;
}

.contain ul li {
  background: cadetblue;
  width: 170px;
  border: 1px solid #fff;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  color: #fff;
  font-size: 16px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
}

.contain ul li:hover{
  background-color:green; 
}

.contain ul ul{
  display: none;
  position: absolute;
  left: 0;
  top: 50px;
  margin: 0;
  padding: 0;
  width: 100%;
}

.contain ul li:hover > ul {
  display: block;
}

.contain ul ul li {
  float: none;
  width: 100%;
}

::-webkit-scrollbar {
  width: 7px;
  background-color: orange;
  height: 20px;
}

HTML部分 #

原有HTML代码无需修改，可直接复用。

调整说明 #

• 新增了悬停显示子菜单的规则.contain ul li:hover > ul { display: block; }，解决子菜单不显示的核心问题
• 修复了顶级ul的定位冲突，移除了不必要的绝对定位和溢出隐藏属性，避免遮挡内容
• 给子菜单设置了正确的定位偏移，对齐父级菜单底部，同时取消子菜单项的浮动实现垂直排列
• 移除了父级li悬停时修改宽高的异常逻辑，避免导航栏整体错位

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