jquery - 靠近窗口边缘时向反方向展开子菜单

Question

我有一个使用 css 的简单子菜单，结构是一个无序列表，它通过将显示更改为“块”来显示悬停状态。

<ul>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li>
        <a href="#">item with submenu</a>
        <ul class="submenu">
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        </ul>
    </li>
</ul>

和CSS：

.submenu {
    display: none;
    position: absolute;
}

ul li:hover>ul.submenu {
    display: block;
}

你可以在这里看到一个例子：http: //jsfiddle.net/Y2vgj/

在这里： http ://tinkerbin.com/9TXjbi8c

（两个链接都一样）

现在，我想要做的是，当页面太小而无法完全显示时，将子菜单扩展到另一个方向。任何人都可以帮助我吗？

Answer 1

为子菜单 li 添加以下样式。

.submenu li {
    float: none;
    width: 150px;
    list-style-type: none;
    display: inline;
}

调整边距和宽度以将它们放置在适当的位置。上述更改将水平显示它们。