css使下拉列表打开向上（相反方向），而不是向下

Question

我已经创建了一个使用CSS的下拉列表。下拉菜单完美，打开菜单。如何修改以打开菜单（反方向）？做一些像下拉列表。 这是我的HTML代码。

<div id="menu"> 

<ul> 
    <li><a href="#"> <?php echo $user_data['name']; ?> </a> 
     <ul> 
      <li><a href="logout.php">Logout</a></li> 
      <li><a href="changepassword.php">Change Password</a><li> 
      <li><a href="settings.php">Settings</a><li> 
     </ul> 
    </li> 
    <li><a href="#"> Profile </a> 
     <ul> 
      <li><a href="profile_menu.php">Edit Profile</a></li> 
      <li><a href="<?php echo $user_data['email']; ?>">View Profile</a></li> 
     </ul> 
    </li> 
     <li><a href="wall.php"> Home </a></li> 
</ul> 

</div> 

这是我的css。

#menu ul{ 
padding:0px; 
margin:0px; 
list-style:none; 
} 

#menu ul li { 
    float:left; 
} 

#menu ul li a:hover{ 
background:#fff; 
color:#333; 
} 


#menu ul li ul{ 
position:absolute; 
height:0px; 
overflow:hidden; 
} 

#menu ul li ul li{ 
float:none; 
} 


#menu ul li:hover ul{ 
overflow:visible; 
} 


#menu ul li:hover ul li a{ 
padding:10px; 
} 


#menu ul li ul li a{ 
-webkit-transition:0.3s; 
-moz-transition:0.3s; 
padding: 0px 10px; 
} 

Answer 1

http://codepen.io/bjornmeansbear/pen/MwGYZL

下面的CSS可以帮助你 - 它采用了“落”并也消除了一些其他的东西......

#menu { 
    margin-top: 100px; 
} 

#menu ul { 
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
} 

#menu > ul > li { 
    float: left; 
    margin: 10px; 
    position: relative; 
} 

#menu a { display: block;} 

#menu a:hover { 
    background: #fff; 
    color: #333; 
} 

#menu ul li ul { 
    position: absolute; 
    height: 0px; 
    width: 250%; 
    overflow: hidden; 
} 

#menu ul li:hover ul { 
    height: initial; 
    bottom: 100%; 
    overflow: visible; 
    background: lightgray; 
} 

#menu li li a { 
    padding: 5px 10px; 
} 

#menu a { 
    -webkit-transition: 0.3s; 
    -moz-transition: 0.3s; 
    padding: 0px 10px; 
} 

基本上，如果你的位置<li>相对容纳儿童<ul>，您可以使用<ul>的绝对位置将其定位在任何位置，直接基于其父对象...是否有意义？