Skip to content Skip to sidebar Skip to footer

CSS - Why Are My Nav Div And Middle Div Overlapping?

You may ignore the code that aren't the actual divs themselves as most of the code is just to make a dropdown nav, but my error may be in there. I'm trying to add a responsive whit

Solution 1:

To accomplish this:

  • Change the floated list items to inline blocks.
  • Change in children list items to display: block;
  • Remove position: absolute on the list items

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>

Solution 2:

 div#middle 
  {
    position: absolute;
  }

Please also post where is the middle div in html code, it may help us figure out the structure of page.


Post a Comment for "CSS - Why Are My Nav Div And Middle Div Overlapping?"