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中编写代码：）

Answer 1

据我所知，没有办法只用CSS检查。你将不得不使用JavaScript。最直接的方法是将鼠标悬停/鼠标悬停（或使用jquery时悬停）绑定到项目，然后将元素x-offset + width与窗口宽度进行比较。

Answer 2

使用纯CSS解决方案，您可以始终交替子菜单的位置。当第一个被定位为显示在其父级右侧时，以下（第三个）子菜单可以位于左侧，依此类推。也许您甚至可以使用:nth-child - 选择器来执行此操作。

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

Answer 3

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