我使用 ngtemplates 创建了一个 Angular 递归菜单。 我想制作在悬停时显示子菜单的菜单。但是,当我退出主菜单的悬停时,我遇到了麻烦,子菜单消失了。
这是我生成的示例代码结构。
a+ul {
display: none;
}
a:hover+ul {
display: block
}
<ul>
<li>
<a>a</a>
<ul>
<li>
<a>b</a>
<ul>
<li><a>c</a></li>
</ul>
</li>
</ul>
</li>
</ul>
最佳答案
这里的问题是,一旦您开始将鼠标悬停在 c
文本上,您就不再将鼠标悬停在 a 上。所以 a:hover + ul
不再有效并且 ul 消失了。要解决这个问题,您可以将 ul 放在包装器中并像这样调整选择器和 html:
.menu-wrapper>ul {
display: none;
}
.menu-wrapper:hover>ul {
display: block
}
<ul>
<li>
<div class="menu-wrapper">
<a>a</a>
<ul>
<li>
<div class="menu-wrapper">
<a>a</a>
<ul>
<li><a>c</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
关于CSS递归菜单在悬停时显示子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59640338/