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;
}

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

1 个答案: