如何使div轉到另一個不固定的div / nav菜單下？

Question

我試圖使一個div進入另一個都不是固定元素的div下。

這是我的代碼：

 ul { list-style-type: none; margin: 0; padding: 0; background-color: #f3f3f3; } li { } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #4CAF50; } li.dropdown { } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #4CAF50;} .dropdown:hover .dropdown-content { display: block; } body {margin: 0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #f3f3f3; } ul.topnav li {float: left;} ul.topnav li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) {background-color: #4CAF50;} ul.topnav li a.active {background-color: #4CAF50;} ul.topnav li.right {float: right;} @media screen and (max-width: 600px){ ul.topnav li.right, ul.topnav li {float: none;} } #white { background-color: white; width: 90%; height: 1000px; position: relative; margin-left: auto; margin-right: auto; } 

 <ul class="topnav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">Creations</a></li> <li><a href="#news">Photos</a></li> <li class="dropdown"> <a class="dropbtn" href="#news">Events</a> <div class="dropdown-content"> <a href="#1">DIY</a> <a href="#2">Flea Market Flip</a> </div> </li> <li><a href="#news">Recycle + Upcycle</a></li> <li><a href="#news">Saving The Enviroment</a></li> <li><a href="#news">Contact Me</a></li> </ul> <div id="white"></div> 

我需要使下拉菜單顯示在名為#white的div上。 另外請注意，我的鏈接目前無處可去，因此它們現在無用。

Answer 1

您的ul.topnav具有css屬性overflow:hidden ，需要刪除該屬性以顯示下拉菜單。 另外，我在ul.topnav和#white添加了z-index值，以便菜單遍歷div。

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f3f3f3;
  z-index: 2;
  display: inline-block;
  position: relative;
}
  #white {
    background-color: white;
    width: 90%;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    position: relative;
}

這是一個小提琴的例子。 希望這對您有所幫助。