CSS下拉菜单能像Windows7下拉菜单一样工作吗？

Question

假设该菜单具有以下结构：

<li class="parent-of-all"><a href="">Parent</a>
    <ul class="sub-menu level-0">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a>
            <ul class="sub-menu level-1">
                <li><a href="">Item 1.1</a></li>
                <li><a href="">Item 1.2</a></li>
                <li><a href="">Item 1.3</a>
                    <ul class="sub-menu level-2">
                        <li><a href="">Item 2.1</a></li>
                        <li><a href="">Item 2.2</a>
                            <ul class="sub-menu level-3">
                                <li><a href="">Item 3.1</a></li>
                                <li><a href="">Item 3.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

以下是样式化后的效果（请注意，嵌套子菜单的position: absolute; left: 100%;）。

现在问题是-我能避免它被推出屏幕吗？我正在寻找Windows7菜单使用的解决方案（它们从不超出屏幕）。是否有一些简单的Javascript检查？我认为只做left: -100%;就可以了，但在什么情况下呢？我只需要一些想法，我就可以用Javascript编写代码：）

- Atadj

---

我认为JavaScript会对你有所帮助。 - NullPoiиteя

这是我在短时间内没有使用JS的最接近的答案，然而它是一个相当简单的答案 - http://jsfiddle.net/VqYuU/1/ - rickyduck

我也对解决方案感兴趣。但是当解决方案是JavaScript时，就会失去CSS菜单的优势，然后你可能需要一路使用JavaScript。 - roel

这些菜单在Windows 98中也有。 - AKS

@rickyduck 很酷，但在更大的屏幕上它可能会一直向右移动...我认为这里必须使用JS...还有当它到达底部时 - 理想情况下，我希望它不要超出屏幕。 - Atadj

Answer 1

据我所知，仅使用CSS无法进行此检查。您需要使用JavaScript。最直接的方法是将mouseover / mouseout（如果您使用jquery，则为hover）绑定到项目上，然后将元素x偏移量+宽度与窗口宽度进行比较。

- roacher

Answer 2

使用纯CSS解决方案，您可以始终交替子菜单的位置。当第一个子菜单被左对齐以出现在其父菜单右侧时，接下来的（第三个）子菜单可以被定位在左侧等等。也许您甚至可以使用:nth-child选择器来实现。

之后，您可以为更宽的屏幕创建异常情况，只需从第n个子菜单开始交替左对齐位置（使用CSS媒体查询）。

- feeela

---

一套不错的想法。到目前为止，我开发了一个快速的 8 行代码的 JS 脚本，它可以计算哪些菜单应该向左移动，哪些应该向右移动。现在正在努力计算顶部和底部的偏移量。 - Atadj

Answer 3

不，你需要使用JavaScript来计算位置。

- Roman