Html CSS菜单位置固定时如何显示菜单子li

我认为标题令人困惑，因此我将解释这个问题： 我有固定位置的菜单，必须保持这种状态。问题在于菜单底部的所有子项都不可见。我为您准备了JSFIDLE：

如果您将鼠标悬停在Travel li上，您将只能看到2个子li，如果它们更多，则会隐藏起来。。 问题是，是否有可能改变子li的顺序位置，因此，如果子li位于底部，则子li的上市将上升，如果是顶部子li，则上市将下降？ 请访问JSFIDLE以更好地了解该问题

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>

浏览我们的分类

如果在最后一个

ul

中添加一个类，比如说

.dropup

，则可以为该

ul

添加自定义CSS：

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

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

---

请参阅。

您使用的浏览器是什么？在Chrome上似乎一切都很好。我在IE10和Mozilla上进行了测试，在这两个平台上，我只能看到2个子li用于Travel-你看到所有3个子li了吗？这就是为什么我在寻找解决方案，使底部子li上升，而不是下降。显然，这取决于你的浏览器大小。是的，较大浏览器上的用户将看到所有3个项目。使用较小浏览器的用户将看不到任何内容。单靠CSS无法解决这个问题；您需要使用javascript来检测子菜单是否100%可见，如果不可见，则从底部而不是顶部定位。哇，这听起来很复杂。。我在某个地方遇到过类似的菜单，我认为它只是由css完成的，或者我错了？