Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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;  /*Code to add a white background to list*/
  padding: 15px;  
}

div#middle
{
  position: absolute;
}


Here is the code for the dropdown menu for the css if you want to take a look
CSS
.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.
Posted
Updated 9-Oct-18 1:45am

1 solution

Here's a jsfiddle of your code:
Edit fiddle - JSFiddle[^]

It looks fine in FireFox and Edge.
It looks like even JS Fiddle doesn't want to support IE now. Interesting.

Here it is as a JSBin : JS Bin - Collaborative JavaScript Debugging[^]

I tested that one in IE 11.666.16299.0 and it works fine.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900