Css 使绝对定位的子对象不超出视口边界

假设我们有一个水平下拉菜单，其结构如下：

<ul class="root">
  <li class="root-item">
    <ul class="submenu">
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </li>
  ...
  <li class="root-item">
    <ul class="submenu">
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </li>
</ul>

.root-item{
    position:relative;
    display:inline-block;
}
.submenu{
    position:absolute;
    top:-1000px;
}
.root-item:hover .submenu{
    top:100%;
}

这里的问题是：如果某个子菜单（比如最后一个子菜单）足够宽，它可能会超出.root边界，最终超出视口（如果.root的宽度是VP的100%）

我想要的是使.s子菜单适合.root；也就是说，sumbenu的左右两边都不会变为负值。但是-对于纯css，如果这里可以跳过使用javascript，那就非常奇怪了。期望的结果是这样的。可能吗

谢谢

这个怎么样

除了一些边框和背景来充实外观之外，我添加到CSS中的所有内容都是两类子菜单：一类对齐父项的左侧并向右扩展（“向右”），另一类对齐并向左扩展（“向左”）

如果您知道哪些子菜单需要向左扩展，哪些子菜单可以向右扩展，并且可以控制子菜单的类，那么这是一个简单的解决方案

（如果你需要更复杂的课程（例如，你不想自己申请“向右”和“向左”的课程），那需要更多的思考。）

更新

下面是另一支钢笔，它利用

：n个子

选择器来确定子菜单的摆动方向，而不是手动应用“向右”和“向左”类名：

---

谢谢您的回复！有一件事让事情复杂化了：如果动态菜单中的项目数量和（特别是）子菜单的大小发生变化，我们无法事先知道“向右”和“向左”类应该应用到哪些项目。您可以设置子菜单的最大宽度，然后您就可以确切地知道有多少子菜单可以向右扩展，在他们开始向左延伸之前。但如果你想要的是一个完全动态的、不受监管的宽度和基于该宽度的行为，我认为你必须使用JavaScript。CSS无法知道您需要知道什么。另外--您看过“：nth child”版本吗？因为这不需要手动应用类，所以只需要知道有多少项可以向右扩展，然后才能开始向左扩展。可能会有帮助。很抱歉回复晚了。不幸的是，如果是一个完全动态的菜单，我们既不能知道项目的数量，也不能知道项目的大小，这些都可以。。。javascript似乎是最后的唯一选择。