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

我用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 {
  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;
}

---

基本上，如果您相对地定位容纳子

的
，您可以使用
的绝对位置直接基于其父对象将其定位到任何位置。。。这有意义吗？
也许这对你有帮助。。。。我添加了底部：300px；要#menu ul li:悬停ul，菜单将向上，但不允许我选择OK需要在底部：180px；但是仍然不能很好地工作，还有其他想法吗？我的建议是彻底研究提供的代码。如果您不理解代码的一部分或一部分，请发布一个新的问题。答案就在那里。
#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;
}