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

【问题标题】：css make drop down list open to up (opposite direction) and not to downcss使下拉列表向上打开（相反方向）而不是向下
【发布时间】：2013-06-20 22:32:25
【问题描述】：

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

【问题讨论】：

也许这对你有帮助....stackoverflow.com/questions/7814186/…
我添加了bottom:300px;到#menu ul li:hover ul，菜单会上升但不允许我选择
ok 需要底部：180px;但还是不好用，还有其他想法吗？
我的建议是彻底研究提供的代码。如果您不理解代码的一部分或部分，请发布有关它的新问题。答案就在那里。

标签： css

【解决方案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;
}

基本上，如果您相对定位容纳子<ul> 的<li>，则可以使用<ul> 的绝对位置直接基于其父级将其定位在任何位置...这有意义吗？

【讨论】：