如何让全屏Dropdown Menu内部内容限制为1000像素宽度？

针对你遇到的下拉菜单内容宽度限制问题，提供两种无需额外嵌套div、不破坏原有布局的解决思路：

方案一：下拉背景铺满视口，内容限制在1000px居中 #

这种方式适合需要下拉菜单背景全屏展示，但实际选项内容和页面宽度（1000px）对齐的场景，给目标选择器添加以下CSS：

.menu > ul > li > ul {
  width: 100vw; /* 下拉菜单占满整个视口宽度 */
  left: 50%; /* 基于父元素定位到水平中间 */
  transform: translateX(-50%); /* 向左偏移自身一半宽度，实现整体居中 */
  padding: 0 calc((100vw - 1000px) / 2); /* 通过左右内边距，把内容限制在中间1000px区域 */
  box-sizing: border-box; /* 确保内边距不会额外增加元素宽度 */
}

方案二：下拉菜单本身宽度为1000px，居中显示 #

如果不需要下拉背景全屏，仅让菜单宽度匹配页面的1000px并居中，使用以下样式：

.menu > ul > li > ul {
  width: 100%;
  max-width: 1000px; /* 限制菜单最大宽度为1000px */
  left: 50%;
  transform: translateX(-50%); /* 水平居中对齐页面 */
  box-sizing: border-box;
}

问题原因说明 #

你之前直接修改.menu > ul > li > ul的宽度导致整个菜单缩小，是因为默认下拉菜单的宽度由内部选项内容决定，强制设置固定宽度会直接压缩整个菜单容器。而上述方案通过视口宽度+内边距或最大宽度+居中定位的方式，既控制了内容区域的宽度，又保留了菜单原有布局结构。

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