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

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

我刚刚发现此链接与您正在寻找的内容类似。

Drop-down menu that opens up/upward with pure css

Answer 2

您需要设置垂直coordonates，这可能是.subNav：bottom:30px;，因为这是nav栏的高度：

DEMO

微型贴片您例如：

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