Question

我正在使用Homepage Creative page Wolverine's Multipurpose HTML 5 Template中的代码。当我将鼠标悬停在导航栏中的链接上时，子菜单不会显示。有没有办法让子菜单显示出来？我还注意到，更改public void Export(ActionEvent e) { pg.setProgress(-1); Task<Void> task = new Task<Void>() { @Override protected Void call() throws Exception { foo(); return null ; } }; task.setOnSucceeded(evt -> { Alert alert = new Alert(AlertType.INFORMATION, "Spreadsheet Generated", ButtonType.CLOSE); alert.showAndWait(); pg.setProgress(1); }); new Thread(task).start(); }中的display:none 不会显示子菜单。

内联CSS

.nav-main-menu > li > ul

外部CSS样式表

  <style> 

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

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

HTML

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

Answer 1

问题不在于您的CSS - 它的大小与您的网页相同。 :-)主体当前不会超过div class="main-nav-wrapper nav-wrapper-1-creative">，因此即使设置为display: block，位于其下方的子菜单也不可见。添加完网页的其余部分后，子菜单应该显示正常。如果您想在此之前看到它们，请向身体添加min-height以使其更高。

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

1 个答案: