如何让多级顶部导航的二级子菜单向右展开避免被遮挡？

问题说明 #

我正在完成一个多级顶部导航，但无法实现让“超级子菜单”项显示在“子菜单”项的右侧。目前它们显示在下方，非最后一项会被遮挡。尝试调整CSS但感到困惑，不想用JavaScript控制显示。

解决方案 #

只需要修改两处CSS规则，就能实现超级子菜单在子菜单右侧显示：

• 针对二级子菜单调整定位：将其从父元素左侧改为右侧起始，并修正垂直偏移
• 移除二级子菜单列表项的清除浮动规则，避免布局错乱

修改后的完整代码 #

CSS代码

ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

li {
    color: #fff;
    background: rgb(29, 39, 87);
    display: block;
    float: left;
    padding: 1rem;
    position: relative;
    text-decoration: none;
    transition-duration: 0.5s;
}
  
li a {
    color: #fff;
}

li:hover,
li:focus-within {
    background: #cc1f2e;
    cursor: pointer;
}

li:focus-within a {
    outline: none;
}

ul li ul {
    background: rgb(29, 39, 87);
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: absolute;
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0;
    display: none;
}

/* 调整二级子菜单的定位，从父元素右侧显示 */
ul li ul li ul {
    margin-top: -1rem;
    left: 100%;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
    visibility: visible;
    opacity: 1;
    display: block;
}

ul li ul li {
    clear: both;
    width: 100%;
}

/* 移除二级子菜单列表项的清除浮动，避免布局错位 */
ul li ul li ul li {
    clear: none;
}

HTML代码

<nav role="navigation">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#" aria-haspopup="true">Item 2</a>
      <ul class="dropdown" aria-label="submenu">
        <li><a href="#">Submenu 1</a>
          <ul class="dropdown2">
            <li><a href="#">Super Submenu 1</a></li>
          </ul>
        </li>
        <li><a href="#">Submenu 2</a>
          <ul class="dropdown2">
            <li><a href="#">Super Submenu 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a>Item 3</a></li>
  </ul>
</nav>

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