Javascript CSS下拉列表是否可以像Windows7下拉列表那样工作？

假设菜单具有以下结构：

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

这就是设置样式时的样子（请注意嵌套子菜单是

位置：绝对；左侧：100%；

）

---

现在的问题是-我能避免它被推下屏幕吗？我正在寻找Windows7菜单使用的解决方案（它们永远不会离开屏幕）。是否有一些简单的Javascript检查？我认为只做

左：-100%可以工作，但在什么条件下？我只需要一些想法，我可以用Javascript编写代码：）
据我所知，仅用CSS无法进行此检查。您必须使用javascript。最直接的方法是将mouseover/mouseout（如果使用jquery，则为hover）绑定到项，然后将元素x-offset+width与窗口宽度进行比较
 不，您需要使用JavaScript来计算位置
使用纯CSS解决方案，您可以始终交替子菜单的位置。当第一个子菜单被左定位为显示在其父菜单的右侧时，以下（第三个）子菜单可以定位在左侧，依此类推。也许您甚至可以使用
：n子项
-选择器来执行此操作

之后，您可以为更宽的屏幕创建例外，只需从第n个子菜单开始交替左位置（使用CSS媒体查询）。
我认为javaScript将帮助您这是我在短时间内不使用js所能得到的最接近的结果，不过这是一个非常简单的答案-我也对解决方案感兴趣。但是当解决方案是javascript时，就会失去css菜单的优势，你可以一直使用javascript。这些菜单在windows 98中也是如此。@rickyduck非常酷，但在更大的屏幕上，它可以一直向右移动。。。我认为JS在这里的使用是必须的。。。当它触底时——理想情况下，我希望它也不要离开屏幕。好主意。到目前为止，我开发了快速的8行代码JS脚本，可以计算哪些菜单应该向左，哪些应该向右。现在正在努力计算顶部和底部偏移量。