使绝对定位的子元素不超出视口边界

Question

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

<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>

css大致如下：

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

问题在于：如果某些（比如最后一个）.submenu足够宽，它可能会超出.root的边界，最终超出视口（如果.root的宽度是VP的100%）。

我想要的是让.submenu适应.root；也就是说，.sumbenu的左侧和右侧不会变成负数。但是，只使用纯CSS，非常好奇，是否有可能在此处跳过使用JavaScript。期望的结果类似于这里的缎带菜单。这是可能的吗？

谢谢！

- bonflash

Answer 1

这个怎么样？

http://codepen.io/MisterGrumpyPants/pen/IwfDC

除了一些边框和背景来补充外观，我在你的CSS中添加的只是两个子菜单类：一个对齐到其父项的左侧并向右延伸（“to-right”），而另一个对齐到右侧并向左延伸（“to-left”）。

这是一个简单的解决方案，如果您知道哪些子菜单需要向左延伸，哪些可以向右延伸，并且可以控制您的子菜单的类，那么它应该会起作用。

（如果您需要更复杂的东西（例如，不想自己应用“to-right”和“to-left”类），那就需要再考虑一下了。）

更新

这里有另一个笔记，利用 :nth-child 选择器来确定子菜单摆动的方向，而不是手动应用“to-right”和“to-left”类名：

http://codepen.io/MisterGrumpyPants/pen/ovJcH

- davidtheclark

---

谢谢回复！有一件事情让它变得更加复杂：对于动态菜单，由于项目数量和（尤其是）子菜单大小的变化，我们无法预先知道应该将_to-right_和_to-left_类应用于哪些项目。 - bonflash

你可以为子菜单设置最大宽度，这样你就能够准确地知道有多少个子菜单可以向右扩展，然后再开始向左扩展。但是，如果你想要完全动态、不受限制的宽度和基于该宽度的行为，我认为你必须使用JavaScript。CSS没有任何办法知道你需要知道的内容。 - davidtheclark

还有——你看过“：nth-child”版本吗？因为这不需要手动应用类，只需要知道在扩展到左侧之前可以向右扩展多少项。可能会有所帮助。 - davidtheclark

抱歉回复晚了。不幸的是，这两个选项都不行，因为在完全动态菜单的情况下，我们既无法知道项目数量，也无法知道它们的大小。...最终似乎JavaScript是唯一的选择。 - bonflash