How do I create a navigation system like that of Lowes.com

Question

I am working on a menu system for my employer and they want a menu system that is like Lowes.com. When you click on Shop, a div opens with a sub navigation with hover of the different catagories. This is all contained in 1 div. I have been trying to get this to work on my current site. I have a JSFiddle set up here: https://jsfiddle.net/wfmcleod/gjawzvpe/1/

I have tried the fixed and that just makes it stay there even when you scroll and the menu will be across all pages and the fixed will need to change each time so it will not work.

So my question to the community is, how do I build a menu system for my site that will work like the one that's on Lowes.com

Here is the HTML & CSS:

Here is the HTML:

 <ul class="main-navigation">
 <li><a href="#">Shop by Category</a>
 <ul>

  <li><a href="#">Apparel & Fashion Accessories</a>
    <ul>
      <li class="fixed">
        <div style="background-color: #e5e5ff; margin-top:-20px;">
          <h2>Apperal</h2>

          <table style="width:800px; height:500px;">
            <tr>
              <td colspan="5">This week</td>
            </tr>
            <tr align="center" valign="top">
              <td>
                <img src="/images/buttons.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Buttons & Magnets
              </td>
              <td>
                <img src="/images/lights.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Lights
              </td>
              <td>
                <img src="/images/notebooks.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Notebooks
              </td>
              <td>
                <img src="/images/pencils.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Pencils, Bookmarks, and container
              </td>
              <td>
                <img src="/images/polish.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Polish & Clothes
              </td>



            </tr>
          </table>
        </div>
      </li>
    </ul>
  </li>


  <li><a href="#">Custom Apparel & Bags
</a>
    <ul>
      <li class="fixed">
        <div style="background-color: #e5e5ff; margin-top:-20px;">
          <h2>Apperal</h2>

          <table style="width:800px; height:500px;">
            <tr>
              <td colspan="5">This week</td>
            </tr>
            <tr align="center" valign="top">
              <td>
                <img src="/images/buttons.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Buttons & Magnets
              </td>
              <td>
                <img src="/images/lights.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Lights
              </td>
              <td>
                <img src="/images/notebooks.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Notebooks
              </td>
              <td>
                <img src="/images/pencils.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Pencils, Bookmarks, and container
              </td>
              <td>
                <img src="/images/polish.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Polish & Clothes
              </td>



            </tr>
          </table>
        </div>
      </li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Events</a></li>
<li><a href="#">Articles</a></li>
</ul>

Here is the CSS: ul { list-style: none; padding: 0; margin: 0; background: #000080; }

ul li {
  display: block;
  position: relative;
  float: left;
  background: #000080;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  padding: 8px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover {
  background: #2c3e50;
}

li:hover > ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
}

li:hover a {
  background: #000080;
}

li:hover li a:hover {
  background: #2c3e50;
}

.main-navigation li ul li {
  border-top: 0;
}

ul ul ul {
  left: 100%;
  top: 0;
}

ul:before,
ul:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

ul:after {
  clear: both;
}

Answer 1

Ok so here is the gist of it.

While testing I removed the second nested ul li and changed it to a simple div element with class absolute:

 .absolute{
    position: absolute;
    top: 0;
    left: 210px;
    display: none;
 }

The core of the solution lies in how position: absolute works.

absolute: Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

Removing the position: relative from your ul li css will do the trick.

Because ul li is now not set as relative, the absolute element will align with the parent ul.

ul li {
  display: block;
  float: left;
  background: #000080;
}

li:hover > .absolute, li:hover > ul {
  display: block;
  position: absolute;
}

I have updated your jsFiddle: https://jsfiddle.net/gjawzvpe/3/