Drop-down menu is not showing up - html

Question

my drop-down menu is not showing up. It's completely invisible or is just not working. Nothing happens when I hover over the "Store" tab which is where the drop-down should occur. When I remove "visibility: hidden" to see where the drop-down menu actually is, the drop-down items appear as the first two tabs which are "Home" and "About". So in the place of the Home and About tabs, the drop-down menu items appear instead. Any help would be appreciated.
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; }
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger-red.png" alt="Hamburger Icon" style="position: relative; top: .25em;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Why Equine</li>
<li>Our Horses</li>
<li>Benefits</li>
<li>Store</li>
<ul class="drop-nav">
<li>Horse Health Store</li>
<li>People Store</li>
</ul>
<li>Contact</li>
</ul>
</nav>

Answer 1

It's not pretty but the dropdown works in the below solution. The issue was the dropdown ul was not nested inside the first-level li.
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; }
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger-red.png" alt="Hamburger Icon" style="position: relative; top: .25em;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Why Equine</li>
<li>Our Horses</li>
<li>Benefits</li>
<li>Store
<ul class="drop-nav">
<li>Horse Health Store</li>
<li>People Store</li>
</ul></li>
<li>Contact</li>
</ul>
</nav>
To clarify, all I changed was moved the closing </li> tag to wrap around the dropdown ul.
<li>Store
<ul class="drop-nav">
<li>Horse Health Store</li>
<li>People Store</li>
</ul></li>

Answer 2

use this to your hover div overflow to the outside of the body and change your Store li is over after your hover ul complete
nav {
background-color: #373945;
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;
}
nav ul li.show:hover>ul {
display: block;
visibility: visible;
opacity: 1;
width: 100%;
max-width: 200px;
top: 32px;
}
nav ul li {
background-color: #373945;
width: 12.5%;
height: 2em;
border-right: 1px solid #ABACAF;
display: inline-block;
float: left;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
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;
font-size: 16px;
}
nav li ul li {
font-size: 1.3em !important;
text-align: left;
width: 100%;
display: block;
float: left;
padding: 10px;
}
nav li ul li a {
color: black;
font-size: 2em;
border: none;
display: block;
}
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Why Equine</li>
<li>Our Horses</li>
<li>Benefits</li>
<li class="show">Store
<ul class="drop-nav">
<li>Horse Health Store </li>
<li>People Store</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>