Dropdown Submenu Disappears on Hover

问题

While I know there are several discussions regarding this issue, none of the solutions fixed my problem. No matter what I do, the CSS submenu I'm trying to use disappears after you stop hovering over the parent li. I haven't the slightest idea what could be causing this, and I've really been staring at this forever trying to find a solution and just can't. I tried adding in a top: px; to the submenu in the CSS, which allowed me to select the submenu options, however it also moved the menu so that it would appear covering and centered over the parent li, which is also no good to me because I need it to appear directly below. Could the header be clipping it and if so what would I need to add to change that? All assistance is so greatly appreciated!

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
  display: none;
}
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}
/* Sub Menus */

.nav li li {
  font-size: .8em;
}
@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }
  .nav a {
    border-bottom: none;
  }
  .nav > ul > li {
    text-align: center;
  }
  .nav > ul > li > a {
    padding-left: 0;
  }
  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }
  .nav li:hover ul {
    display: block;
  }
  .nav li ul li {
    display: block;
  }
}
#header {
  float: left;
  background-color: #ffffff;
  cursor: default;
  padding: 1.75em 2em 0em 0em;
  position: relative;
}

<header>
  <img id="logo" src="images/logo.jpg" alt="logo">
  <div class="nav">
    <ul>
      <li class="home"><a href="#">Home</a>
      </li>
      <li class="tutorials"><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Tutorial #1@@</a>
          </li>
          <li><a href="#">Tutorial #2</a>
          </li>
          <li><a href="#">Tutorial #3</a>
          </li>
        </ul>
      </li>
      <li class="about"><a class="active" href="#">About</a>
      </li>
      <li class="news"><a href="#">Newsletter</a>
        <ul>
          <li><a href="#">News #1</a>
          </li>
          <li><a href="#">News #2@@@</a>
          </li>
          <li><a href="#">News #3</a>
          </li>
        </ul>
      </li>
      <li class="contact"><a href="#">Contact</a>
      </li>
    </ul>
  </div>
</header>

回答1:

I did figure this out eventually but thought I should come back and update with my solution, in case it is helpful to anyone who is having a similar issue. It was actually really simple.

I had to add a z-index here:

      .nav li:hover ul {
          display: block;
          z-index: 99999;
      }

This was recommended to other users, and I did try it initially but did not place it in li:hover thus it didn't work. I guess because the high z-index forces it to the top, it stopped whatever was causing the clipping by placing the submenu above it. I must have misread something somewhere along the line and placed the z-index in the wrong section. The real solution here is probably to read your code carefully!

来源：https://stackoverflow.com/questions/39159050/dropdown-submenu-disappears-on-hover

标签

html

css

navigation

submenu