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 onthe 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 & 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?"