CSS 选择器悬停不适用于列表中的列表

Question

我正在使用 Homepage Creative page 中的代码来自 Wolverine's Multipurpose HTML 5 Template .当我将鼠标悬停在导航栏中的链接上时，子菜单没有显示。有没有办法让子菜单显示出来？我还注意到在 .nav-main-menu > li > ul 中更改 display:none 确实不显示子菜单。

内联 CSS

  <style> 

    .nav-main-menu > li > ul {
        display: none;
    }

    .nav-main-menu > li:hover > ul {
        display:block;
    } 
</style>

外部 CSS 样式表

  .nav-main-menu:not(.left-menu) > .sub-menu > ul {
    display: none;
    position: absolute;
  }

  .nav-main-menu:not(.left-menu) > .sub-menu .sub-menu > ul {
    display: none;
  }

  .nav-main-menu:not(.left-menu) > .sub-menu .sub-menu:hover > ul {
    display: block;
    -webkit-animation: fadeIn 0.7s;
            animation: fadeIn 0.7s;
  }

  .nav-main-menu:not(.left-menu) > .sub-menu:hover > ul {
    display: block;
    -webkit-animation: fadeIn 0.7s;
            animation: fadeIn 0.7s;
  }

HTML

<ul class="nav-main-menu nav-content-item">
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a>
            <ul>
              <li><a href="">PROJECT OVERVIEW</a></li>
              <li><a href="">PROJECT BACKGROUND</a></li>
              <li><a href="">FUTURE APPLICATIONS</a></li>
              </ul>
          </li>
 </ul>

Answer 1

问题不在于您的 CSS，而是网页的大小。 :-) 正文目前没有超出 div class="main-nav-wrapper nav-wrapper-1-creative">，因此位于其下方的子菜单甚至不可见当设置为 display: block 时。添加完网页的其余部分后，子菜单应该可以正常显示。如果您想在那之前看到它们，请向正文添加 min-height 以使其更高。