如何创建下拉菜单？点击主菜单后下拉菜单行内显示问题求助

我懂你遇到的困扰了——鼠标悬停主菜单标题时，下拉菜单没有垂直展开，反而和主菜单挤在一行里，对吧？这是因为你的子菜单没有脱离主菜单的flex布局流，也缺少必要的定位设置，咱们一步步来修复：

问题根源分析 #

你的主菜单nav ul用了display:flex，这个属性会让子元素（包括子菜单的ul）默认也遵循flex布局，所以子菜单的li会横向排列；另外子菜单没有设置定位，会占据主菜单的行内空间，导致布局混乱。

修改后的CSS代码 #

nav{ 
  display:flex; 
  background-color:black; 
  text-transform:uppercase; 
  padding-top:30px; 
  padding-bottom:30px; 
  font-size:15px; 
  justify-content:center; 
} 

nav ul{ 
  display:flex; 
  margin:0; /* 去掉默认列表外边距 */
  padding:0; /* 去掉默认列表内边距 */
} 

nav ul li{ 
  list-style:none; 
  position:relative; /* 关键：让子菜单基于这个li定位 */
} 

nav ul li a{ 
  text-decoration:none; 
  color:white; 
  position:relative; 
  letter-spacing:2px; 
  margin:20px; 
  display:block; /* 让a标签占据整个li区域，hover更友好 */
} 

/* 子菜单容器样式 */
nav ul li ul{
  position:absolute; /* 脱离文档流，不影响主菜单布局 */
  top:100%; /* 定位在主菜单li的下方 */
  left:0;
  background-color:black; /* 和主菜单背景统一 */
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column; /* 让子li垂直排列 */
}

nav ul li ul li{ 
  display:none; 
} 

nav ul li:hover ul li{ 
  display:block; 
}

/* 可选：给子菜单的a标签调整间距 */
nav ul li ul li a{
  margin:10px 20px;
}

关键修改点说明 #

• 给主菜单的li添加position:relative，作为子菜单定位的参考容器
• 给子菜单的ul设置position:absolute，让它脱离主菜单的flex布局流，不会挤开其他主菜单项
• 给子菜单ul添加flex-direction:column，强制子项垂直排列
• 清理了列表默认的margin和padding，避免布局偏移
• 给主菜单的a标签设置display:block，让整个li区域都能触发hover，提升交互体验

这样修改后，鼠标悬停主菜单时，下拉菜单就会垂直展开在主菜单的下方啦～

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