<div class="page-wrapper">
  <header class="page-header">
    <div class="header-container">
      <p>
        CSS fullwidth drop down menu. Each submenu stays underneath it's parent item.
        <a href="https://stackoverflow.com/questions/17261421/full-width-css-dropdown-menu">Solution (thanks to Ionică Bizău)</a>
      </p>
    </div>  
    <nav>
      <ul>
        <li>
          <a href="#">Menu 1</a>
          <ul class="sub-nav">
            <li><a href="#">Sub menu1</a></li>
            <li><a href="#">Sub menu2</a></li>
            <li><a href="#">Sub menu3</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu 2</a>
          <ul class="sub-nav">
            <li><a href="#">Sub menu1</a></li>
            <li><a href="#">Sub menu2</a></li>
            <li><a href="#">Sub menu3</a></li>
            <li><a href="#">Sub menu4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu 3</a>
        </li>
        <li>
          <a href="#">Menu 4</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
    </section>  
  </main>
</div>

.theme-dark {
  margin-top: 0;
  
  p {
    padding: 10px;
    text-align: center;
  }

  .page-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    
    .page-header {
      background-color: @purple;      
      
      .header-container {
        width: 1132px;
        margin: 0 auto;
        border: 1px dashed @gray-dark;
      }

      nav {
        background-color: @yellow;
        position: absolute;
        width: 100%;
        left: 0;
        
        ul {
          margin: 0 auto;
          padding-left: 20px;
          max-width: 1132px;

          a {
            color: @purple-dark;
            text-decoration: none;
          }
        }
/* == Level 1 == */
        > ul {
          > li { 
            display: inline-block; 
            position: relative;
            padding: 10px;
            z-index: 100;

/* == Level 2 == */
            > ul {
              position: absolute;
              left: 0;
              top: 100%;
              padding: 0.5em 1000em; /* trick from css-tricks comments */
              margin: 0 -1000em; /* trick from css-tricks comments */
              z-index: 101;
              visibility: hidden;
              opacity: 0;
              background: @red;

              > li {
                padding: 5px 0;
                list-style: none;
                margin: 0 12px;
                min-width: 250px;

                a {
                  color: @white;
                  text-shadow: 1px 1px @black;
                }
              } 
            }
            &:hover > ul {   
              visibility: visible;
              opacity: 1;
              transition: all @base-animation;
            }
          }
        } 
      }     
    }
    main {
      section {
        width: 1132px;
        margin: 0 auto;
        border: 1px dashed @gray-dark;
        min-height: 300px;
      }
    }
  }
}