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

调整边距和宽度，使其处于正确位置。以上更改将水平显示。

靠近窗口边缘时，将子菜单向相反方向展开

1 个答案: