title: My dropdown menu is not showing up
body: <p>I am trying to create a dropdown menu in HTML and CSS and it does not work as I'm expecting it to. I don't know what is wrong with it. </p>
  
  <p>I'm attempting to make the menu show the subset of items in the parent items <code>&lt;ul&gt;</code> tags on hover and it is not working. Either the child items don't show at all (just the parent items show) or the child items are strewn all across the page in a weird fashion.</p>
  
  <p>My HTML, CSS AND JavaScript code:</p>
  
  <p><a href="https://media.giphy.com/media/l49JWLEHbQ71K1lWE/giphy.gif" rel="nofollow noreferrer">What I'm trying to create</a> (NOT MY VIDEO).</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 copyText(element) {
      var $temp = $("&lt;input&gt;");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      try {
          document.execCommand("copy");
      } catch(err) {
          console.log(err);
      }
      $temp.remove();
  }
  
  function copyMessage() {
      console.log("Triggered change");
      $("#note").fadeIn("fast");
      $("#note").fadeOut("slow");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
  
  * {
      box-sizing: border-box;
  }
  
  body {
      margin: 0;
      font-family: 'Raleway', sans-serif;
      text-align: center;
  }
  
  img {
      max-width: 100% height: auto;
  }
  
  .container {
      width: 95%;
      margin: 0 auto;
  }
  
  /* Typography
  ========*/
  
  .title {
      font-size: 2.5rem;
      color: #b21acs;
  }
  
  .title span {
      font-size: 3.75rem;
      font-weight: 300;
      display: block;
  }
  
  .title span2 {
      font-size: 2rem;
      font-weight: 300;
      display: block
  }
  
  .title span3 {
      display: none;
  }
  
  .note {
      display: none;
      color: #b21acd;
  }
  
  /*button 
  ======== */
  
  .button {
      display: inline-block;
      font-size: 1.15rem;
      text-decoration: none;
      text-transform: uppercase;
      border-width: 5px;
      border-style: solid;
      padding: .5em 1.75em;
      border-color: #b21acd;
      color: #FFF;
      background-color: transparent;
  }
  
  /*Header
  ======== */
  
  header {
      position: absolute;
      left: 0;
      right: 0;
      margin-top: 0em;
  }
  
  nav ul {
      margin: 0px;
      padding: 0px;
      list-style: none;
      text-align: center;
      background-color: transparent;
      display: inline-block;
  }
  
  nav ul li ul {
      border-bottom: none;
      height: 86px;
      line-height: 86px;
      font-size: 14px;
      display: inline-block;
      float: left;
      margin: 0 auto;
  }
  
  nav ul li ul li {
      display: none; 
      padding: 0px;
      margin: 0px;
      opacity: .8;
      list-style: none;
      background-color: black;
      float: left;
      line-height: 40px;
      text-align: center;
      font-size: 12px;
      position: absolute;
      z-index: 1;     
  }
  
  nav ul li ul li a{
      display: block;
      padding: 12px 16px;
      text-decoration: none;
      color: #000
  }
  
  nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  nav li {
      display: inline-block;
      margin: 1em;
  }
  
  nav a {
      font-weight: 900;
      text-decoration: none;
      text-transform: uppercase;
      font-size: .8rem;
      padding: .5em;
      color: #FFF;
  }
  
  nav a:hover,
  nav a:focus {
      color: #b21acd;
  }
  
  nav ul li ul:hover nav ul li ul li {
      display: inline-block;
  }
  
  nav .current {
      color: #b21acd;
  }
  
  /* home-hero
  ======= */
  
  .home-hero {
      background-image: url(../assets/home-hero_background.png);
      padding: 10em 0;
      font-weight: 700;
      background-color: #000;
      color: #FFF;
  }
  
  /* Footer
  ========= */
  
  footer {
      background-color: #b21acd;
      color: #FFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width-device-width, initial-scale=1"&gt;
          &lt;title&gt;TrigonMC | Home&lt;/title&gt;
          &lt;link href="css/styles.css" rel="stylesheet" type="text/css"&gt;
          &lt;link rel="shortcut-icon" href="assets/favicon.ico" type="image/x-icon"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/copyAndChange.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;img src="assets/logo_transparent.png" alt="TrigonMC Network Logo" class="logo"&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a class="current" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="./forums"&gt;Forums&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="./bans"&gt;Punishments&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Warnings&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Mutes&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Kicks&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Bans&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Temp-Mutes&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Temp-Bans&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;IP-Bans&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Apply&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Apply For Staff&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Apply For Builder&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Videos&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;ExZiByte's Livestream&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;GameWolf's Livestream&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Placeholder 1&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
          &lt;section class="home-hero"&gt;
              &lt;div class="container"&gt;
                  &lt;h1 class="title"&gt;TrigonMC Network
                      &lt;span&gt;We Support&lt;/span&gt;
                      &lt;span2&gt;Versions 1.8 - 1.12.2&lt;/span2&gt;
                      &lt;span3 id='ip'&gt;play.trigonmc.com&lt;/span3&gt;
                  &lt;/h1&gt;
                  &lt;button id='ipButton' class="button button-accent" onclick="copyText('#ip'); copyMessage();"&gt;Copy the IP of the server!&lt;/button&gt;
                  &lt;div class="note"&gt;
                      &lt;p&gt;Copied!&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;section class="home-servers"&gt;
              &lt;div class="home-servers-textbox"&gt;
                  &lt;h1&gt;Servers we have&lt;/h1&gt;
                  &lt;h3&gt;Creative&lt;/h3&gt;
                  &lt;h5&gt;Coming Soon&lt;/h5&gt;
                  &lt;h3&gt;Prison&lt;/h3&gt;
                  &lt;h5&gt;Coming Soon&lt;/h5&gt;
                  &lt;h3&gt;Skyblock&lt;/h3&gt;
                  &lt;h5&gt;Coming Soon&lt;/h5&gt;
                  &lt;h3&gt;Survival&lt;/h3&gt;
                  &lt;h5&gt;Coming Soon&lt;/h5&gt;
                  &lt;h3&gt;&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;footer&gt;
              &lt;p&gt;TrigonMC Gaming Group Copyright © 2018&lt;/p&gt;
              &lt;p&gt;All images Copyright © of respectful owners&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>