CSS - 为什么我的导航 div 和中间 div 重叠?

Question

您可以忽略不是实际div本身的代码，因为大多数代码只是为了进行下拉导航，但我的错误可能在那里。

我正在尝试为导航div 添加响应式白色背景颜色。 每当导航div 定位为绝对值时，白色背景高度会随着浏览器大小而变化，并且中间的div 会重叠。但是，如果导航div 是相对定位的，则白色背景高度没有响应，但中间div 不会重叠。

我不确定它是否与容器部门有关。

div#Container
{
position: relative;
}
.nav
{
width: 100%;  
position: absolute;
background-color: white;  /*Code to add a white background to list*/
padding: 15px;  
}
/*Code up until line 64 to make a dropdown menu */
.nav a
{
color: #ffffff;
text-decoration: none;
background-color: #000000;
}
.nav ul
{
display:block;
}
.nav ul a
{
display: block;
float:left;
width: 150px;
padding: 10px 20px;
border: 1px solid #ffffff;
text-align: center;
font-size: 1.3em;
}
.nav ul a:hover
{
background: red;
}
.nav ul li
{
display: block;
float:left;
position: relative;
}
.nav ul li:hover > ul
{
display:block;
}
.nav ul li ul
{
margin:0;
padding: 0;
display: none;
position: absolute;
background-color: #000000;
top: 45px;
}

div#middle
{
position: absolute;
}

<div id="Container">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">Parts &amp; Tools</a>
<ul>
<li><a href="#">Parts</a></li>
<li><a href="#">Tools</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="middle">
<p>text</p>
</div>
</div>

Answer 1

要完成此操作：

• 将浮动列表项更改为内联块。
将
• 子列表项更改为display: block;
• position: absolute on列表项中删除

body {  background: red;  }
div#Container
{
position: relative;
}
.nav
{
width: 100%;  
position: absolute;
background-color: white;  /*Code to add a white background to list*/
padding: 15px;  
}
/*Code up until line 64 to make a dropdown menu */
.nav a
{
color: #ffffff;
text-decoration: none;
background-color: #000000;
}
.nav ul
{
display:block;
}
.nav ul a
{
display: block;
float:left;
width: 150px;
padding: 10px 20px;
border: 1px solid #ffffff;
text-align: center;
font-size: 1.3em;
}
.nav ul a:hover
{
background: red;
}
.nav ul li
{
/*display: block;
float:left;
position: relative*/
/* Add this */
display: inline-block;
vertical-align: top;
}

/* Add this */
.nav ul ul li {  display: block;  }
.nav ul li:hover > ul
{
display:block;
}
.nav ul li ul
{
margin:0;
padding: 0;
display: none;
/*position: absolute;*/
background-color: #000000;
top: 45px;
}

div#middle
{
position: absolute;
}

<div id="Container">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">Parts &amp; Tools</a>
<ul>
<li><a href="#">Parts</a></li>
<li><a href="#">Tools</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

Answer 2

div#middle 
{
position: absolute;
}

还请发布 html 代码中的中间div 在哪里，它可以帮助我们弄清楚页面的结构。