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

Question

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

代替显示：无显示块。 您可以使其保持遮挡，并在过渡时使用高度和不透明度。 这将解决您的问题，并添加动画。

所以代替：

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

您可以将过渡更改为所需的任何设置，包括延迟（或完全不过渡）。