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

\n\n

下面的 CSS 应该可以帮助你 \xe2\x80\x94\xc2\xa0it 合并了“下拉”并且还清理了一些其他东西......

\n\n

#menu {\n  margin-top: 100px;\n}\n\n#menu ul {\n  padding: 0px;\n  margin: 0px;\n  list-style: none;\n}\n\n#menu > ul > li {\n  float: left;\n  margin: 10px;\n  position: relative;\n}\n\n#menu a { display: block;}\n\n#menu a:hover {\n  background: #fff;\n  color: #333;\n}\n\n#menu ul li ul {\n  position: absolute;\n  height: 0px;\n  width: 250%;\n  overflow: hidden;\n}\n\n#menu ul li:hover ul {\n  height: initial;\n  bottom: 100%;\n  overflow: visible;\n  background: lightgray;\n}\n\n#menu li li a {\n  padding: 5px 10px;\n}\n\n#menu a {\n  -webkit-transition: 0.3s;\n  -moz-transition: 0.3s;\n  padding: 0px 10px;\n}\n

\n\n

基本上，如果您相对地放置<li>孩子的位置<ul>，您可以使用 的绝对位置<ul>直接根据其父母将其放置在任何地方......这有意义吗？

\n