How to make submenu push content down

Question

I'm trying to figure out how to toggle the display of a submenu, opened on clicking a top menu item, and making it relatively positioned so that it pushes content down as it animates open, and also goes full browser width. This also has to happen in a way that keeps the top level menu intact, which is what I'm finding tricky to implement. Here's my attempt here:

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

.header-container {
  position: relative;
}
.main-nav #nav {
  text-align: center;
  margin: 0;
}
.main-nav #nav > li {
  display: inline-block;
  list-style: none;
}
.main-nav #nav > li ul {
  display: none;
  background: blue;
}
.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div class="wrapper">
</div>

Answer 1

Well, it's a little tricky but you can use :before pseudo element with position: absolute to cover the screen width.

For this solution to works you have to not set any parent of it with position: relative. This way, the :before element will take the full width.

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

.header-container {
  position: relative;
}
.main-nav #nav {
  text-align: center;
  margin: 0;
}
.main-nav #nav > li {
  display: inline-block;
  list-style: none;
  vertical-align: top;
}
.main-nav #nav > li ul {
  display: none;
  background: blue;
}

.main-nav #nav > li ul:before {
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  background: blue;
  height: 100%;
  z-index: -1;
}

.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div class="wrapper">
</div>

Answer 2

Check below modifications.

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery('#subMenu').slideToggle("slow");
});

.header-container {
  position: relative;
  margin: 0;
}
.main-nav #nav {
  text-align: center;
  margin: 0;
}
.main-nav #nav > li {
  display: inline-block;
  list-style: none;
  vertical-align: text-top;
  max-width: 100px;
}
#subMenu {
  display: none;
  background: blue;
  position: relative;
  top: 50;
  left: 0;
  width: 100%;
  margin: 0px;
}
#subMenu > ul {
  margin: 0;
}
.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div id="subMenu">
     <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
</div>
<div class="wrapper">
</div>

Please check modified code. now

Answer 3

You can use flexbox:

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

.header-container {
  position: relative;
}
.main-nav #nav {
  display: flex;
  text-align: center;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.main-nav #nav > li {
  list-style: none;
  flex: 1;
}
.main-nav #nav > li ul {
  display: none;
  background: blue;
}
.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div class="wrapper">
</div>