title: Drop-down menu is not showing up
body: <p>my drop-down menu is not showing up. It's completely invisible or is just not working. Nothing happens when I hover over the &quot;Store&quot; tab which is where the drop-down should occur. When I remove &quot;visibility: hidden&quot; to see where the drop-down menu actually is, the drop-down items appear as the first two tabs which are &quot;Home&quot; and &quot;About&quot;. So in the place of the Home and About tabs, the drop-down menu items appear instead. Any help would be appreciated.</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-css lang-css prettyprint-override"><code>nav {
    background-color: #373945;
    border-top: 6px solid #ABACAF;    
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    position: relative;
    float: left;
  }
  
  nav ul  {
    list-style: none;
    text-align: center;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }
  
  nav ul ul {
    padding: 0; 
    position: absolute;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -webkit-transition: all .25s ease-in;
  }
  
  nav ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
  }
  
  nav ul li {
    background-color: #373945;
    width: 12.5%;
    height: 2em;
    border-right: 1px solid #ABACAF;
    display: inline-block;
    float: left;
  
    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    /* Firefox */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    /* W3C */
    vertical-align: middle;
    font-weight: normal;
  
    -webkit-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
    -moz-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
    -ms-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
    -o-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
    transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  nav ul li:nth-child(1) { border-left: 1px solid #ABACAF; }
  
  nav ul li:hover { background-color: #544D55; color: white; }
  
  nav ul li a {
    color: #ABACAF;
    text-decoration: none;
  }
  
  nav ul li:hover a { color: white; }
  
  nav li ul li {
    font-size: 1.3em !important;
    text-align: left;
    width: 100%;
    display: block;
    float: left;
  }
  
  nav li ul li:nth-of-type(1) {
    width: 96%;
    padding: 18px 0 20px 4%;
  }
  
  nav li ul li:nth-of-type(2) {
    width: 96%;
    padding: 18px 0 20px 4%;
  }
  
  nav li ul li a {
    color: black;
    font-size: 2em;
    border: none;
    display: block;
  }
  
  /*Style 'show menu' label button and hide it by default*/
  .show-menu {
    cursor: pointer;
    display: none;
  }
  
  /*Hide checkbox*/
  input[type=checkbox] { display: none; }
  
  /*Show menu when invisible checkbox is checked*/
  input[type=checkbox]:checked ~ #menu { display: block; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;label for="show-menu" class="show-menu"&gt;&lt;img src="hamburger-red.png" alt="Hamburger Icon" style="position: relative; top: .25em;"&gt;&lt;/label&gt;
    &lt;input type="checkbox" id="show-menu" role="button"&gt;
    &lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href="index.html" class="active-link"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="programs.html"&gt;Programs&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="why-equine.html"&gt;Why Equine&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="our-horses.html"&gt;Our Horses&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="benefits.html"&gt;Benefits&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="store.html"&gt;Store&lt;/a&gt;&lt;/li&gt;
        &lt;ul class="drop-nav"&gt;
          &lt;li&gt;&lt;a href="horse-store.html" target="_blank"&gt;Horse Health Store&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="people-store.html"&gt;People Store&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>