Drop-down menu is not showing up-CodePudding

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><a href="index.html" class="active-link">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="programs.html">Programs</a></li>
    <li><a href="why-equine.html">Why Equine</a></li>
    <li><a href="our-horses.html">Our Horses</a></li>
    <li><a href="benefits.html">Benefits</a></li>
    <li><a href="store.html">Store</a></li>
      <ul class="drop-nav">
        <li><a href="horse-store.html" target="_blank">Horse Health Store</a></li>
        <li><a href="people-store.html">People Store</a></li>
      </ul>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

CodePudding user response：

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><a href="index.html" class="active-link">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="programs.html">Programs</a></li>
    <li><a href="why-equine.html">Why Equine</a></li>
    <li><a href="our-horses.html">Our Horses</a></li>
    <li><a href="benefits.html">Benefits</a></li>
    <li><a href="store.html">Store</a>
      <ul class="drop-nav">
        <li><a href="horse-store.html" target="_blank">Horse Health Store</a></li>
        <li><a href="people-store.html">People Store</a></li>
      </ul></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

To clarify, all I changed was moved the closing </li> tag to wrap around the dropdown ul.

<li><a href="store.html">Store</a>
      <ul class="drop-nav">
        <li><a href="horse-store.html" target="_blank">Horse Health Store</a></li>
        <li><a href="people-store.html">People Store</a></li>
      </ul></li>

CodePudding user response：

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><a href="index.html" class="active-link">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="programs.html">Programs</a></li>
            <li><a href="why-equine.html">Why Equine</a></li>
            <li><a href="our-horses.html">Our Horses</a></li>
            <li><a href="benefits.html">Benefits</a></li>
            <li class="show"><a href="store.html">Store</a>
                <ul class="drop-nav">
                    <li><a href="horse-store.html" target="_blank">Horse Health Store</a>   </li>
                    <li><a href="people-store.html">People Store</a></li>
                </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>