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

 div#middle 
  {
    position: absolute;
  }

还请在html代码中发布中间div的位置，这可能有助于我们弄清页面的结构。

Answer 2

要做到这一点：

将浮动列表项更改为嵌入式块。
将子级列表项更改为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>

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

2 个答案: