I have a container which has all the code in it. Inside there, I have nav div and a middle div.
The container is positioned relative, while the nav and middle are positioned absolute.
Also, a bit of an odd question, but in Internet Explorer (don't judge) the dropdown menu of the nav division are opening horizontally instead vertically. I can't seem to find the reason it does that.
Here is the HTML
<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>
Here is the css code for the divs (my original code was improved by Chris Happy from
html - css- why are my nav div and middle div are overlapping? - Stack Overflow[
^])
div#Container
{
position: relative;
}
.nav
{
width: 100%;
position: absolute;
background-color: white;
padding: 15px;
}
div#middle
{
position: absolute;
}
Here is the code for the dropdown menu for the css if you want to take a look
.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: inline-block;
vertical-align: top;
}
.nav ul ul li { display: block; }
.nav ul li:hover > ul
{
display:block;
}
.nav ul li ul
{
margin:0;
padding: 0;
display: none;
background-color: #000000;
top: 45px;
What I have tried:
I used top: x and left: y to move the middle , but I'm not satisfied as everything still isn't as responsive as I want it to be.