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应该对您有所帮助 - 它包含了“drop-up”并清理了其他一些内容......

#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>的{{1}}，您可以使用<ul>的绝对位置将其定位在任何位置，直接基于其父级。这有意义吗？

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

1 个答案: