如何修改Codesandbox实现Toast UI首页式联动定位导航栏？

我想要制作如下样式的导航栏，灵感来自Toast UI首页：


Toast UI 首页

我已经尽可能复刻该导航栏，当前实现效果如下：

我希望实现以下两种效果（已通过图片编辑制作）：
option1: 居中对齐

option2: 左对齐

我希望link-list的位置能根据所在的link-group动态定位，而非仅固定左对齐，让link-list直接显示在对应的link-group下方来优化UI。请问如何修改我的CodeSandbox代码实现该效果？

核心思路 #

让下拉列表（link-list）跟随对应导航组（link-group）定位，核心是用CSS的相对定位+绝对定位组合，把下拉列表的定位上下文绑定到父级导航组上。

具体修改步骤 #

1. 给link-group添加相对定位
   在.link-group的CSS中补充：

   .link-group {
     position: relative;
     /* 保留原有其他样式 */
   }
   

   这一步将link-group设为绝对定位元素的参考容器，让下拉列表能基于它定位。

2. 调整link-list的定位样式
   移除当前.link-list中固定的全局定位属性，替换为基于父级的定位：

   .link-list {
     position: absolute;
     top: 100%; /* 让下拉列表紧贴导航组底部 */
     /* 以下二选一，对应两种需求 */
     /* 选项1：居中对齐 */
     left: 50%;
     transform: translateX(-50%);
     /* 选项2：左对齐 */
     /* left: 0; */
     /* 保留原有背景、padding、宽度等样式 */
   }
   

   • 居中对齐时，left:50%配合transform: translateX(-50%)实现精准居中；
   • 左对齐时直接设置left:0，让下拉列表与导航组左边缘对齐。

3. 处理导航栏溢出问题
   如果下拉列表超出导航栏范围，给最外层导航容器添加：

   .navbar {
     overflow: visible;
     /* 保留原有其他样式 */
   }
   

补充说明 #

这种定位方式能让每个下拉列表精准对应到触发它的导航组下方，完全贴合需求；如果需要响应式适配，只需调整.link-list的宽度或添加媒体查询，定位逻辑不受影响。

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