Html 如何创建一个向上显示的下拉菜单？

我想知道如何创建一个倒过来的下拉菜单，这样列表就不会从下面下拉，而是向上。我目前有一个菜单设置，但我找不到一个方法来扭转它

CSS:

这是我的菜单

---

如果有人能告诉我我需要改变什么或添加什么来反转菜单，那将非常有帮助

您需要设置垂直坐标，这里可以是

.subNav

：

底部：30px因为这是导航条的高度：


示例的迷你修补程序：

li:hover ul {
  display:block;
  bottom:30px;
}

        <ul class="mainNav">

            <li><a href="Home.html">Home</a></li>
            <li>
                <!-- span gives clickable area to trigger event handler -->
                <span><a href="#">Content</a></span>

                <ul class="subNav">
                    <li><a href="clientside.html">Client Side</a></li>
                    <li><a href="web.html">Web</a></li>

                </ul>
            </li>

            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>

    </div>

li:hover ul {
  display:block;
  bottom:30px;
}