title: How do i get the nav bar dropdown menu to overlap the body?
body: <p>I'm trying to get the dropdown menu on the navbar to overlap the body. I have tried z-index: 1; but the drop down menu is still cover by the body, How do I get the dropdown menu to overlap the body?</p>
  
  <p>Also when I try to get have the navbar in mobile mode the menu is not align with the navbar, how do I get it align with the nav bar?</p>
  
  <p>Thanks for your help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
    $(function() {
      $('nav ul li &gt; a:not(:only-child)').click(function(e) {
        $(this).siblings('.dropdown').toggle();
        $('.dropdown').not($(this).siblings()).hide();
        e.stopPropagation();
      });
      $('html').click(function() {
        $('.dropdown').hide();
      });
      $('#toggle').on('click', function() {
        this.classList.toggle('active');
      });
      $('#toggle').click(function() {
    $('nav ul').toggle();
  });
    });
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*, body{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
  }
  
  /* Navbar */
  nav {
  float: right;
  }
  
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav ul li {
    float: left;
    position: relative;
  }
  
  nav ul li a {
    display: block;
    padding: 0 20px;
    line-height: 70px;
    background: #ffffff;
    color: #333;
    text-decoration: none;
  }
  
  nav ul li a:hover {
    background: #ffffff;
    color: #008000;
  }
  
  nav ul li a:not(:only-child):after {
    padding-left: 1px;
    content: ' ▾';
  }
  
  nav ul li ul li {
    min-width: 190px;
  }
  
  nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
  }
  
  .dropdown {
    position: absolute;
    z-index: 9;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    display: none;
  }
  
  .mobile {
    position: absolute;
    top: 0;
    right: 0;
    background: #ffffff;
    height: 70px;
    width: 70px;
  }
  
  @media only screen and (max-width: 800px) {
    .mobile {
      display: block;
    }
  
    nav {
      width: 100%;
      padding: 70px 0 15px;
    }
  
    nav ul {
      display: none;
    }
  
    nav ul li {
      float: none;
    }
  
    nav ul li a {
      padding: 15px;
      line-height: 20px;
    }
  
    nav ul li ul li a {
      padding-left: 30px;
    }
  
    .dropdown {
      position: static;
    }
  
    nav ul {
      display: none;
    }
  
    #toggle {
      position: absolute;
      left: 18px;
      top: 22px;
      cursor: pointer;
      padding: 10px 35px 16px 0px;
    }
  
    #toggle span,
    #toggle span:before,
    #toggle span:after {
      color: #333;
      cursor: pointer;
      border-radius: 1px;
      height: 5px;
      width: 35px;
      background: #333;
      position: absolute;
      display: block;
      content: '';
      transition: all 300ms ease-in-out;
    }
  
    #toggle span:before {
      top: -10px;
    }
  
    #toggle span:after {
      bottom: -10px;
    }
  
    #toggle.active span {
      background-color: transparent;
    }
  
    #toggle.active span:before,
    #toggle.active span:after {
      top: 0;
    }
  
    #toggle.active span:before {
      transform: rotate(45deg);
    }
  
    #toggle.active span:after {
      transform: rotate(-45deg);
    }
  }
  
  @media screen and (min-width: 800px) {
    .list {
      display: block !important;
    }
  }
  
  .navigation {
    height: 70px;
    background: #ffffff;
  }
  
  .container {
    max-width: 1500px;
    margin: 0 auto;
  }
  
  .brand {
    font-size: 20px;
    position: relative;
    padding: 20px;
    width: 200px;
    float: left;
    text-transform: none;
  }
  
  .brand a,
  .brand a:visited {
    color: #333;
    text-decoration: none;
  }
  
  /* Body */
  .body{
    box-sizing: border-box;
    z-index: -1;
  }
  
  .container {
    width:90%;
    max-width: 1300px;
    margin: 2em auto;
    background-color:#fff;
    overflow:hidden;
    padding:.5em;
  }
  
  img {
    max-width:100%;
  }
  
  .item {
    width:25%;
    float:left;
    padding:.5em;
    border:1px solid #333;
    /*background-color:#fff;*/
  }
  
  .item p {
    min-height:3em;
    /*background-color:#fff;*/
    margin:.5em 0 0 0;
    font-size:.9em;
    text-align:center;
  }
  
  @media screen and (max-width:1000px) {
  
  /*   body {
      background-color:#fff;
    } */
  
    .item {
      width:33.3%;
    }
  
  }
  
  
  @media screen and (max-width:800px) {
  
  /*   body {
      background-color:#fff;
    } */
  
    .item {
      width:50%;
    }
  
    .item p {
    font-size:.8em;
    }
  
  }
  
  @media screen and (max-width:400px) {
  
  /*   body {
      background-color:#fff;
    } */
  
    .item {
      width:100%;
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;section class="navigation"&gt;
      &lt;div class="container"&gt;
        &lt;div class="brand"&gt;
          &lt;a href="#!"&gt;Logo&lt;/a&gt;
        &lt;/div&gt;
        &lt;nav&gt;
          &lt;div class="mobile"&gt;
            &lt;a id="toggle" href="#!"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;ul class="list"&gt;
            &lt;li&gt;&lt;a id="home" href="#!"&gt;Item&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a id="home" href="#!"&gt;Item&lt;/a&gt;
              &lt;ul class="dropdown"&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a id="home" href="#!"&gt;Item&lt;/a&gt;
              &lt;ul class="dropdown"&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
              &lt;li&gt;&lt;a id="home" href="#!"&gt;Item&lt;/a&gt;
                &lt;ul class="dropdown"&gt;
                  &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Item&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a id="home" href="#!"&gt;Item&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="body"&gt;
      &lt;div class="container"&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="http://placehold.it/400x300"&gt;
        &lt;p&gt;Item Caption&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;/section&gt;
    &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'&gt;&lt;/script&gt;
    &lt;script  src="js/index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>