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

fiddleの例を示します。これがあなたを助けることを願っています