使用`overflow：auto'时不显示子菜单

时间：2018-08-01 05:51:23

标签： html css

在以下代码中，我创建了一个多级下拉菜单，该菜单显示在悬停上。

现在，当我在父菜单中使用overflow: auto时，子菜单不会显示。同样，对于类sub_courses，他们也遇到同样的问题。

我不知道如何解决此问题。

nav{background: black;}
nav#desktop-nav ul {
  text-align: right;
}

nav#desktop-nav ul .active>a {
  color: #fdc800;
}

nav#desktop-nav ul li {
  display: inline-block;
  position: relative;
}

nav#desktop-nav ul li:hover ul {
  opacity: 1;
  transform: scaleY(1);
  visibility: visible;
}

nav#desktop-nav ul li:hover ul:before {
  width: 100%;
}

nav#desktop-nav ul li a {
  padding: 30px 20px;
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  color: #ffffff;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

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

nav#desktop-nav li.has-child-menu>ul.thired-level li.has-child-menu {
  position: relative;
}

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

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

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.has-child-menu>ul.sub_courses {
  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>ul.thired-level li.has-child-menu>ul.sub_courses 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#desktop-nav li.has-child-menu>ul.thired-level li.has-child-menu:hover ul.sub_courses {
  opacity: 1;
  transform: scaleY(1);
  visibility: visible;
}
<nav id="desktop-nav">
  <ul>
    <li>
      <a href="javascript:void(0)">All Courses</a>
      <ul id="hash-li" style="overflow:auto;max-height:30em;overflow:visible;">
        <li class='has-child-menu'>
          <a href='#' class='link' id='microsoft'>Microsoft</a>
          <ul class="thired-level">
            <li class='has-child-menu'>
              <a href='#' class='course'>development</a>
              <ul class="sub_courses">
                <li>
                  <a href="#">dot net</a>
                </li>
                <li>
                  <a href="#">advance dot net</a>
                </li>
              </ul>
              <a href='#' class='course'>oracle</a>
              <ul class="sub_courses">
                <li>
                  <a href="#">java</a>
                </li>
                <li>
                  <a href="#">advance java</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

1 个答案:

答案 0 :(得分：0)

您正在将元素放置在视口（left: 245px）的外部，然后需要向右滚动才能看到它，但是向右滚动则会松开悬停。

因此，将left更改为right: 240px;：

nav#desktop-nav li.has-child-menu>ul.thired-level {
  right: 240px;
  [...]
}

nav#desktop-nav li.has-child-menu>ul.thired-level li.has-child-menu>ul.sub_courses {
  right: 240px;
  [...]
}

如果设置right: 100%;，则会获得更好的结果，请参见代码段：

body{background: black;}
nav#desktop-nav ul {
  text-align: right;
}

nav#desktop-nav ul .active>a {
  color: #fdc800;
}

nav#desktop-nav ul li {
  display: inline-block;
  position: relative;
}

nav#desktop-nav ul li:hover ul {
  opacity: 1;
  transform: scaleY(1);
  visibility: visible;
}

nav#desktop-nav ul li:hover ul:before {
  width: 100%;
}

nav#desktop-nav ul li a {
  padding: 30px 20px;
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  color: #ffffff;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

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

nav#desktop-nav li.has-child-menu>ul.thired-level li.has-child-menu {
  position: relative;
}

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

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

nav#desktop-nav li.has-child-menu>ul.thired-level {
  position: absolute;
  right: 100%;
  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.has-child-menu>ul.sub_courses {
  position: absolute;
  right: 100%;
  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>ul.thired-level li.has-child-menu>ul.sub_courses 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#desktop-nav li.has-child-menu>ul.thired-level li.has-child-menu:hover ul.sub_courses {
  opacity: 1;
  transform: scaleY(1);
  visibility: visible;
}
<nav id="desktop-nav">
  <ul>
    <li>
      <a href="javascript:void(0)">All Courses</a>
      <ul id="hash-li" style="overflow:auto;max-height:30em;overflow:visible;">
        <li class='has-child-menu'>
          <a href='#' class='link' id='microsoft'>Microsoft</a>
          <ul class="thired-level">
            <li class='has-child-menu'>
              <a href='#' class='course'>development</a>
              <ul class="sub_courses">
                <li>
                  <a href="#">dot net</a>
                </li>
                <li>
                  <a href="#">advance dot net</a>
                </li>
              </ul>
              <a href='#' class='course'>oracle</a>
              <ul class="sub_courses">
                <li>
                  <a href="#">java</a>
                </li>
                <li>
                  <a href="#">advance java</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

相关问题
最新问题