Can CSS drop-down behave like Windows7 drop-downs?

Question

Let's say that menu has the following structure:

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

And this is how it looks like when styled (please note that nested sub-menus are position: absolute; left: 100%;).

Now the questions is - can I avoid it being pushed off the screen? I'm looking for a solution that Windows7 menus use (they never go off the screen). Is there some simple Javascript check? I think that doing just left: -100%; would work but under what conditions? I just need some idea and I can code that in Javascript :)

Answer 1

As far as i know, there is no way to do this check with CSS only. You will have to use javascript. The most straight forward approach would be binding mouseover/mouseout (or hover if you use jquery) to the items, then comparing the elements x-offset + width with window width.

Answer 2

With a pure CSS solution you could always alternate the position of the submenus. When the first was left positioned to appear right to its parent, the following (third) submenu could be positioned on the left and so on. Maybe you could even use the :nth-child-selector to do so.

Afterwards you can create exceptions for wider screens, just alternating the left position starting off the nth child submenu (using CSS media queries).