Click here to Skip to main content
14,603,943 members
Rate this:
Please Sign up or sign in to vote.
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
.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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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.
   

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100