悬停时无法访问下面的 css 菜单子(monad)项

Question

我在 Wordpress 中有一个 3 层的 css 菜单，问题是悬停时无法到达打开了第 3 层的菜单 level2 下面的层(完整的第 2 层菜单关闭)。有什么帮助吗？

我的代码是:

<div class="nav">
<ul>
    <li><a href="#">Main-menu</a>
<ul class="sub-menu">
    <li><a href="#">Sub-item</a></li>
    <li><a href="#">Second-submenu</a>
    <ul class="sub-menu">
        <li><a href="#">XY</a></li>
        <li><a href="#">XY</a></li>
        <li><a href="#">XY</a></li>
    </ul>
</li>
    <li><a href="#">Last-sub-menu</a>
    <ul class="sub-menu">
        <li><a href="#">XY</a></li>
        <li><a href="#">XY</a></li>
        <li><a href="#">XY</a></li>
    </ul>
</li>
</ul>
</li>
    <li><a href="#">Second-item</a></li>
    </ul>
</div> 

和CSS:

.nav { font-size:1.4em; }

.nav ul { padding:0; margin: 0; background: #0A488E; }

.nav ul li { display:inline-block; margin-right:5%; }

.nav ul li a { color:white; }

.nav li ul.sub-menu {
  display: none;
  position: absolute;
  padding: 7px 21px;
  padding-left: 21px;
  text-align: left;
  margin-left: -21px;
  background: #0A488E;
  font-size: 0.9em;
  z-index: 100;
}

.nav li:hover > ul.sub-menu, .nav li ul.sub-menu li:hover > ul.sub-menu {
display: block;
}

.nav li ul.sub-menu li {
display:block;
margin: 9px 0;
}

.nav li ul.sub-menu li ul.sub-menu {
  position: relative;
  padding: 0 5%;
} 

fiddle 在这里:https://jsfiddle.net/f7ny3s3r/2/

(最后一个子菜单是有问题的)

谢谢你的帮助!

Answer 1

根据您的要求，我在这里修复了它 -

https://jsfiddle.net/f7ny3s3r/7/

代替 display: none 进入 display block 。您可以将其保持为 block 状，并在过渡中使用高度和不透明度。这将解决您的问题，并添加动画。

所以代替:

.nav li ul.sub-menu {
  display: none;

使用:

.nav li ul.sub-menu {
transition: 0.5s all;
display: block;
height: 0;
opacity:0;

和

.nav li:hover > ul.sub-menu, .nav li ul.sub-menu li:hover > ul.sub-menu {
height: auto;
opacity:1;
}

您可以将过渡更改为您想要的任何内容，包括延迟(或根本没有过渡)。