CSS - Почему мои навигационные и средние div перекрываются?

Question

Вы можете игнорировать код, который не является самим делителем, так как большая часть кода состоит просто в создании выпадающего меню, но моя ошибка может быть там.

Я пытаюсь добавитьАдаптивный белый цвет фона для навигации.Всякий раз, когда div nav позиционируется как абсолютный, высота белого фона изменяется в зависимости от размера браузера, а средний div перекрывается.Однако, если div nav расположен относительно, высота белого фона не реагирует, но средний 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;
  }

Пожалуйста, также напишите, где находится средний div в HTML-коде, это может помочь нам выяснить структуру страницы.