使用Flexbox实现二级导航展开不扩展一级导航区域的问题

要实现鼠标悬停一级导航时展开二级导航，但不撑开绿色一级导航栏和蓝色导航容器的效果，你可以通过以下CSS调整实现，无需修改HTML结构：

核心思路 #

让二级导航脱离当前的Flex布局流，同时用Flex布局组织二级导航的内部结构——给一级列表项设置定位上下文，二级导航采用绝对定位脱离文档流，避免撑开父容器。

修改后的完整CSS代码 #

/* global */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  line-height: 1.7;
  font-family: "Inconsolata", monospace;
  color: #341f97;
}

.container {
  max-width: 1140px;
  padding: 0 20px;
}

.section {
  padding: 96px 0;
}

/* navigation */
.navigation {
  background-color: #2e86de;
  padding: 12px 0;
}

.navigation ul {
  list-style-type: none;
  background-color: green;
  display: flex;
  justify-content: space-around; /* 让一级导航均匀分布 */
}

.navigation a {
  text-decoration: none;
  color: #c8d6e5;
  padding: 8px 0;
  display: block; /* 扩大点击热区 */
}

.navigation a:hover {
  color: yellow;
}

/* 一级列表项设置定位基准，同时用Flex垂直排列内部元素 */
.navigation ul li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 二级导航默认隐藏，用Flex垂直排列子项 */
.navigation ul ul {
  display: none;
  flex-direction: column;
  background-color: red;
  position: absolute; /* 脱离文档流，不影响父容器高度 */
  top: 100%; /* 定位到一级导航下方 */
  left: 0;
  width: 100%; /* 与一级导航项宽度一致 */
}

/* 悬停时显示二级导航 */
.navigation ul li:hover ul {
  display: flex;
}

关键调整说明 #

1. 给.navigation ul li添加position: relative，作为二级导航的定位上下文，确保二级导航不会偏移到页面其他位置。
2. 二级导航.navigation ul ul设置position: absolute，脱离当前布局流，完全不会撑开父容器的高度，绿色和蓝色背景区域保持原有尺寸。
3. 用flex-direction: column让二级导航的子项垂直排列，符合Flex布局要求；justify-content: space-around让一级导航项均匀分布，提升不同屏幕下的适配性。

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