title: Additional Navigation bar on click
body: <p>I have a navigation bar with the section "Contracts" and I was wondering if it were possible, and how would I go about adding an additional navigation bar to expand underneath when this button is tagged, (For example, on the Apple Store site, when you click a product, this adds another bar)</p>
  
  <p><a href="https://i.stack.imgur.com/4eI3B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4eI3B.png" alt="Apple Navigation Bar"></a></p>
  
  <p>I can provide my entire CSS style sheet if needed! I think this will require JavaScript but I'm trying to keep it as pure CSS for now!</p>
  
  <p>All help is greatly appreciated!</p>
  
  <p>HTML Code: This is the Navigation HTML</p>
  
  <p>
  </p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="title"&gt;
          &lt;img src="img/logo2.png"/&gt;
      &lt;/div&gt;
      &lt;div class="navbar"&gt;
          &lt;ul&gt;
              &lt;li style="float: left"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;Contracts&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;About Us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#other"&gt;Other&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt; &lt;a href="#release"&gt;Release Notes&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt; &lt;a target="_blank" href="http://www.phpartnership.com"&gt;Pinnacle Health Partnership&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Creates this</p>
  
  <p><a href="https://i.stack.imgur.com/9sTak.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9sTak.png" alt="My nav bar"></a></p>
  
  <p>CSS Code: My entire stylesheet</p>
  
  <pre><code>body {
      background-color: #fff;
      margin: 0;
      font-family: Arial;
      color: #333;
  }
  
  header {
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
  }
  
  .navbar {
      display: block;
      text-align: center;
  }
  
  .navbar ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      overflow: hidden;
  }
  
   .navbar li {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      position: relative;
      overflow: hidden;
  }
  .navbar li:before {
      content: "";
      position: absolute;
      z-index: -1;
      left: 50%;
      right: 50%;
      bottom: 0;
      background: white;
      height: 4px;
      -webkit-transition-property: left, right;
      transition-property: left, right;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
  }
  .navbar li:hover:before, navbar li:focus:before, .navbar li:active:before {
      left: 0;
      right: 0;
  }
  
  .navbar li a {
      padding: 25px;
      display: block;
      height: 100%;
      color: white;
      text-decoration: none;
  }
  
  .title {
      height: 80px;
      padding: 2px;
      background-color: #fff;
  }
  
  .container {
      margin-top: 150px;
      padding-top: 50px;
  }
  
  .home {
      margin-top: 10px;
      text-align: center;
      padding: 40px !important;
  }
  .wrap {
      width: 100%;
      margin: 0 auto;
  }
  .left_col {
      float: left;
      width: 50%;
  }
  .right_col {
      float: right;
     width: 50%;
  }
  .right_col img {
      width: 80%;
      margin-top: 50px;
      border: 2px solid black;
      border-radius: 5px;
  }
  .left_col img {
      width: 80%;
      margin-top: 50px;
      border: 2px solid black;
      border-radius: 5px;
  }
  </code></pre>
  
  <p>This is the JavaScript I tried to use to hide and show the div on click</p>
  
  <pre><code>&lt;script&gt;
  $(index.php).ready(function(){
      ``$("#contract").click(function(){
              $("&lt;div class="contracts"&gt;").toggle();
          });
  });
  &lt;/script&gt;
  </code></pre>