html - 如何创建一个下拉菜单，而不是向上显示？

Question

我想知道如何创建一个反转的下拉菜单，而不是下面下拉的列表，列表向上。我目前设置了一个菜单，但我找不到反转它的方法。

CSS:

.subtitle
    {

       width: 612px;
       margin: 0 auto;
       left: 0px;
       background-color:black;
       border: 2px solid grey;
       position:absolute;
       display:inline;
       padding: 10px 0px 10px 10px; 
       top: 765px;
       right: 0px;
       font-family:"Myriad Pro";
       z-index:10;
    }            
/*Menu CSS */
    /* mainnav bar list */
    ul.mainNav {
        padding: 0px;
        margin: 0px;
        list-style: none;
        height: 30px;
        background-color: black;
        z-index:25;
    }

    /* mainnav links */
    ul.mainNav li {
        text-align:center;
        float: left;
        width: 150px;
        padding-left: 0px;
        position: relative;
        text-decoration: none;
        font-size:18px;
        z-index:25;
    }

    ul.mainNav li a {
        display: block;
        width: 150px;
        color: cyan;
        padding-top: 3px;
        padding-bottom: 7px;
        z-index:25;
    }

    ul.mainNav li a:hover {
        background-color: black;
        color:white;
        z-index:25;
    }

    /* subnav layer */
    ul.subNav {
        padding:0px;
        margin:0px;
        list-style:none;
        position: absolute;
        display: none;
        z-index:30;
    }

    ul.subNav li {
        display: block;
        padding-left: none;
        float: left;
        text-align: center;
        background-color: black;
        border-bottom: ridge 1px #4F0000;
        z-index:30;
    }

    /* subnav links */
    ul.subNav li a {
        float: left;
        display: block;
        width: 150px;
        height: 20px;
        padding-top: 9px;
        background-color: black;
        color: cyan;
        font-size: 11pt;
        z-index:30;

    }

    ul.subNav li a:hover {
        background-color: black;
        color: white;
        z-index:30;
    }

这是我的菜单 HTML

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

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

Answer 1

你需要设置垂直坐标，这里可能是 .subNav : bottom:30px; 因为这是 nav 的高度栏:

DEMO

你的例子的小补丁:

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