悬停时会出现下拉子菜单 [英] Dropdown Submenu Disappears on Hover

问题描述

虽然我知道有关此问题的讨论有很多，但没有一种解决方案可以解决我的问题.无论我做什么，当您停止将鼠标悬停在父级li上之后，我要使用的CSS子菜单都会消失.我丝毫不知道是什么原因造成的，而且我一直一直在凝视着它，一直在试图找到解决方案，但事实并非如此.我尝试添加顶部:px;到CSS的子菜单中，这使我可以选择子菜单选项，但是它也移动了菜单，使其看起来覆盖父中心li，并居中，这对我也没有好处，因为我需要将其直接显示在下面.标题可以剪辑吗，如果是的话，我需要添加些什么来更改它?非常感谢所有协助！

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>

推荐答案

我最终想出了解决办法，但是我认为我应该回来并更新我的解决方案，以防对遇到类似问题的人有所帮助.其实很简单.

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.

我必须在此处添加一个z索引:

I had to add a z-index here:

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

这是推荐给其他用户的，我最初尝试过，但是没有将它放在li:hover中，因此它不起作用.我猜是因为较高的z-index将其推到顶部，所以通过将子菜单置于其上方，它停止了导致剪切的任何原因.我一定误读了一些内容，并将z-index放在错误的部分.真正的解决方案可能是仔细阅读代码！

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!

这篇关于悬停时会出现下拉子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！