Question

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

2013-06-24

9587

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 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;
}

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