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 与窗口宽度进行比较。