悬停时无法访问下面的 CSS 菜单子项

Question

我在 Wordpress 中有一个具有 3 个级别的 css 菜单，问题是悬停时无法到达打开级别 3 的菜单级别 2 下方的级别（完整的 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%;
} 

小提琴在这里：https://jsfiddle.net/f7ny3s3r/2/

（最后一个子菜单有问题）

感谢您的帮助！

Answer 1

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

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

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

所以不是：

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

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