html - CSS如何在菜单固定位置时显示菜单子(monad)li

Question

我想这个标题令人困惑，所以我将解释这个问题: 我有固定位置的菜单，必须保持这种状态。问题在于菜单底部的所有 sub li 元素 - 它们并不全部可见。我已经为你准备了 jsfiddle : jsfiddle

如果您将鼠标悬停在 Travel li 上，您将只能看到 2 个 sub li，如果它们更多，它们将保持隐藏状态。 问题是是否可以更改 sub li 订单位置，如果位于底部，则 sub li 列表会上升，如果它是顶部 sub li，则列表会下降到底部？ 请访问 jsfiddle 以更好地理解问题。

html 是:

<div id="menu" style="display: block;">
    <h2>Browse our categories</h2>
    <div id="nav">
        <ul id="catmenu">
            <li class="main"><a href="accountants">Accountants</a>
                <ul class="subul">
                    <li><a href="travel-2">Accountants1</a></li>
                    <li><a href="travel-agents">Accountants2</a></li>
                    <li><a href="travel-agents">Accountants3</a></li>
                </ul>

            </li>
            <li class="main"><a href="automotive">Automotive</a></li>
            <li class="main"><a href="building">Building</a></li>
            <li class="main"><a href="business-services">Business services</a></li>
            <li class="main with"><a href="travel">Travel</a>
                <ul class="subul"><li><a href="travel-2">Travel 1</a></li>
                    <li><a href="travel-agents">Travel agents2</a></li>
                    <li><a href="travel-agents">Travel agents3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Answer 1

如果您向最后一个 ul 添加一个类，比如 .dropup，那么可以为该 ul 添加自定义 CSS:

ul.subul.dropup{top:auto;bottom:0;}

这将使最后一个菜单项的底部与菜单底部对齐。

参见 demo .