2
我已经制作了一个下拉菜单，但现在它位于另一个div的后面。我不知道这是怎么发生的，我从来没有过。请帮助我如何解决这个问题，并且下拉菜单不在一些文本后面。下拉菜单位于标签后面
/* -------------
Header
------------- */
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
margin: 0 auto auto;
width: 100%;
background: #DADADA;
overflow-y: scroll;
}
#header {
background: linear-gradient(#4CAE97, #378171);
width: 100%;
height: 60px;
border-bottom: 1px solid black;
}
#header_text {
background-color: transparent;
font-size: 40px;
color: #e89696;
text-align: center;
text-shadow: -2px 0 #6a7e89, 0 2px #6a7e89, 2px 0 #6a7e89, 0 -2px #6a7e89;
}
/* ------------- */
/* Navigation */
/* ------------- */
#ul-nav {
list-style-type: none;
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, 0px); /*Zorgt er voor dat hij precies in het midden is*/
width: 600px;
height: 50px;
}
.nav-item {
margin-left: 10px;
margin-right: 10px;
width: 170px;
text-align: center;
float: left;
padding: 0px;
}
.nav-a {
border: 1px solid black;
border-top: 0px;
border-radius: 0px 0px 10px 10px;
color: black;
background: linear-gradient(#FFADAD, #d38787);
text-decoration: none;
height: 100%;
width: 100%;
padding: 7px;
display: block;
}
.nav-a:hover {
background: linear-gradient(#d78e8e, #c67f7f);
height: 100%;
width: 100%;
margin: 0px;
display: block;
}
#nav-main:hover {
border-radius: 10px 10px 10px 10px;
}
#nav-po:hover {
border-radius: 10px 10px 10px 10px;
}
#nav-contact:hover {
border-radius: 10px 10px 10px 10px;
}
/* ------------- */
/* Dropdown menu */
/* ------------- */
#nav-po-ul:hover ul {
display: block;
}
#nav-po-ul ul {
display: none;
position: absolute;
background: #d78e8e;
}
#nav-po-ul ul li {
display: block;
list-style-type: none;
width: 170px;
}
#nav-po-ul ul li a:visited {
color: black;
}
/* ------------- */
/* Container */
/* ------------- */
#container {
/*Vorm*/
height: 600px;
width: 600px;
margin: 50px auto 0px;
/*Border*/
border: 1px solid #000000;
border-radius: 10px;
/*Background*/
background: #f9f9f9;
/*Padding*/
padding-left: 200px;
padding-right: 50px;
padding-top: 10px;
}
#container_header {
position: absolute;
width: 900px;
}
#container_header_text {
width: 500px;
}
#container_header_hr {
width: 500px;
margin-left: -20px;
}
#container_text {
margin-top: 50px;
width: 450px;
}
/*Zet banaan op goede plek en formaat*/
#banaan {
width: 200px;
margin-left: 280px;
}
/*Laat de banaan draaien*/
#banaan:active {
transform: rotate(-180deg);
}<!DOCTYPE html>
<title>Informatica → Jonathan</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<header id="header">
<h1 id="header_text">Jonathan's website</h1>
</header>
<nav>
<ul id="ul-nav">
<li class="nav-item">
<a class="nav-a" id="nav-main" href="index.html">Home</a>
</li>
<li class="nav-item" id="nav-po-ul">
<a class="nav-a" id="nav-po" href="#">Opdrachten</a>
<!-- Dropdown menu -->
<ul>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Test</a>
</li>
</ul>
</li>
<!-- Eind dropdown menu -->
</li>
<!-- End test -->
<li class="nav-item">
<a class="nav-a" id="nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</nav>
<main>
<div id="container">
<header id="container_header">
<h1 id="container_header_text">Welkom op mijn Website!</h1>
<hr id="container_header_hr"/>
</header>
<div id="container_text">
<p class="text">Ga naar één van mijn po's of ga helemaal niks doen</p>
<p class="text">Als je kiest voor de optie niks doen heb ik nog een banaan hier onder voor je, ga daar maar mee spelen.</p>
</div>
<img id="banaan" src="img/banana.png" title=""/>
</div>
</main>
</body>
请包括JavaScript和CSS。更好的是，添加一个小提琴。 –
lel srry ...忘了它 –