通过设置 width: fit-content 并配合最小宽度约束，可使下拉菜单容器自动撑开至最长项宽度，确保所有文本完整可见且布局一致。

通过设置 `width: fit-content` 并配合最小宽度约束，可使下拉菜单容器自动撑开至最长项宽度，确保所有文本完整可见且布局一致。

在当前的导航下拉菜单实现中，.dropdown（即子菜单

）默认设为 width: 100%，这会使其继承父容器（.container）的宽度，而非根据内部文本内容自适应——导致较短容器裁剪长文本，或宽容器造成视觉松散。

核心解决方案：
将 .dropdown 的宽度由 100% 改为 fit-content，并添加 min-width: 100% 以确保它至少不窄于触发按钮（即 .language 链接），同时能随最长菜单项动态扩展：

ul.dropdown {
  width: fit-content;      /* 关键：按内容宽度自动收缩/扩展 */
  min-width: 100%;         /* 确保不比父级触发项更窄 */
  background: #22438C;
  position: absolute;
  z-index: 999;
  display: none;
  /* 可选：避免因绝对定位导致的水平偏移问题 */
  left: 0;
  top: 100%;
}

此外，为防止 .language 触发链接本身过窄影响整体对齐，建议为其显式设置 display: inline-block 并保留内边距（当前已满足），同时确保其父元素 .container 不施加意外宽度限制（当前 inline-block 是合适的）。

补充优化建议：

• 添加 white-space: nowrap 到 .dropdown a，防止长语言名（如 "Español" 或 "中文"）被意外换行；
• 使用 box-sizing: border-box 统一盒模型，避免 padding 影响宽度计算；
• 若需支持旧版浏览器（如 IE），fit-content 可降级为 -moz-fit-content / -webkit-fit-content，或改用 display: inline-table + width: auto 组合方案。

最终效果：下拉菜单宽度精准匹配“German”“English”等项中最宽者（含 padding），且始终 ≥ 触发按钮宽度，文字完整、对齐统一、响应自然。