html - 使用滚动时多级导航菜单不起作用

Question

nav#desktop-nav ul li>ul {
  margin-top: 0;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  transform: scaleY(0);
  transform-origin: 0 0 0;
  transition: all 0.5s ease 0s;
  width: 16em;
  z-index: 99999;
  background: #002147;
  padding: 0;
  left: -2em;
  overflow: auto;
  max-height: 20em;
}

nav#desktop-nav li.has-child-menu {
  position: relative;
}

nav#desktop-nav li.has-child-menu>a {
  color: #ffffff;
}

nav#desktop-nav li.has-child-menu>a:after {
  font-family: 'FontAwesome';
  content: "\f105";
  float: right;
}

nav#desktop-nav li.has-child-menu>ul.thired-level {
  position: absolute;
  left: 240px;
  top: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0 0;
  transition: all 0.5s ease 0s;
}

nav#desktop-nav li.has-child-menu>ul.thired-level li a {
  color: #ffffff;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3 ease-out;
  -ms-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
}

nav#desktop-nav li.has-child-menu:hover ul.thired-level {
  opacity: 1;
  transform: scaleY(1);
  visibility: visible;
}

<nav id="desktop-nav">
  <ul>
    <li>
      <a href="javascript:void(0)">Courses</a>
      <ul id="hash-li">
        <li class='has-child-menu'>
          <a href='javascript:void(0)' class='link'>Microsoft</a>
          <ul class="thired-level">
            <li>Dot Net</li>
            <li>Advance Dot Net</li>
            <li>Xamarine</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

这可能是我重复的问题。在这个问题中，我创建了多级导航菜单，但是当我使用 overflow:auto;max-height:20em 时，滚动条正在显示，但是当我将鼠标悬停在任何列表上时，子菜单没有显示(li)我不知道为什么问题在哪里？。那么，我该怎么做呢？请帮助我。

谢谢

Answer 1

ul 的父级是 li。如果 ul 处于绝对位置，则 li 必须具有相对位置

li{position: relative;}

当鼠标悬停在 li 容器上时，ul 样式必须像这样改变

li:hover > ul{
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}