6

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

1 に答える 1

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

基本的に、<li>子を収容する を<ul>相対的に配置すると、 の絶対位置を使用し<ul>て、親に直接基づいて任意の場所に配置できます...それは理にかなっていますか?

于 2015-07-08T23:18:12.970 に答える