修复多级下拉菜单失效问题，实现右侧展开与自适应宽度

我参考一篇文章实现了如下下拉菜单，但二级菜单无法正常工作。需求如下：

• 二级菜单显示在一级菜单右侧
• 各级菜单宽度随内容自适应
• 根按钮宽度不受一级菜单限制
  希望能有无需重写全部代码的解决方案。

原实现代码 #

CSS #

.dropdown
{
    display: inline-block;
    position: relative;
}
.dropdown button > a
{
    display: block;
    color: #000000;
    text-decoration: none;
}
.dropdown-content
{
    display: none;
    position: absolute;
    width: auto;
    overflow: auto;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
}
.dropdown:hover .dropdown-content
{
    display: block;
}
.dropdown-content a
{
    display: block;
    color: #000000;
    background-color: #e9e9ed;
    padding: 5px;
    text-decoration: none;
}
.dropdown-content a:hover
{
    color: #FFFFFF;
    background-color: #0080bf;
}

HTML #

<DIV class="dropdown"><BUTTON>Menu</BUTTON><DIV class="dropdown-content">
    <A href="/1.php">Option 1</A>
    <A href="/2.php">Option 2</A>
    <A href="/3.php">Option 3</A>
    <DIV class="dropdown"><BUTTON><A href="/4.php">Option 4</A></BUTTON><DIV class="dropdown-content">
        <A href="/4-1.php">Option 4-1</A>
        <A href="/4-2.php">Option 4-2</A>
        <A href="/4-3.php">Option 4-3</A>
    </DIV></DIV>
</DIV></DIV>

解决方案 #

只需在原有CSS基础上添加/修改以下规则，无需重写全部代码：

/* 确保嵌套的dropdown保持相对定位，为二级菜单提供定位基准 */
.dropdown-content .dropdown {
  position: relative;
}

/* 将二级菜单定位到父级dropdown的右侧 */
.dropdown-content .dropdown .dropdown-content {
  left: 100%;
  top: 0;
  /* 用max-content确保宽度完全适配内容 */
  width: max-content;
}

/* 可选：确保根按钮内容不换行，宽度由自身内容决定 */
.dropdown > button {
  white-space: nowrap;
}

修改说明 #

1. 二级菜单位置修正：通过left:100%; top:0让二级菜单紧贴一级菜单右侧显示，解决了原来二级菜单被遮挡或位置错误的问题。
2. 宽度自适应优化：width: max-content明确让菜单宽度完全适配内部文本，比auto更稳定。
3. 根按钮宽度独立：white-space: nowrap确保根按钮的文本不会换行，宽度仅由自身内容决定，不受下拉菜单宽度影响。
4. 通用层级支持：这套修改对三级及以上菜单同样生效，因为选择器是嵌套的.dropdown-content .dropdown，所有子层级都会继承该规则。

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