flexbox 下拉菜单，菜单故意重叠子菜单链接

Question

对 html 和 css 不熟悉，这是我的第一篇文章，我会尽量讲清楚。

我的项目不打算在线发布，仅用于学习目的。

我正在尝试使用 flexbox 构建一个下拉菜单。 菜单有 3 个级别。 第一级是标签样式。 第二级是下拉；见第一张图片。

第 3 层，最初是隐藏的，我想在显示时嵌套在第 2 层中，直接在它的父级下方；见第二张图。

现在，我的问题是，虽然打开了 level3 菜单（在我的模型中选择“选项 2.1”），但此刻我选择了 另一个 level2（在我的模型中，' option 2.2'），我 也 选择底层 level3（这里是“option 2.2.2”）；见第二和第三张图片。这当然是不需要的，因为这会激活到另一个页面的链接。

我试过摆弄'pointer-events'、'z-index'和'position'、'visibility'，但无法让事情正常工作。当然我已经用谷歌搜索了这个问题，但我发现的点击是指删除重叠而不是故意创建它......

任何帮助将不胜感激！

image 1: first 2 levels

image 2: nested 3rd levels

image 3: the overlap

.bnav {
    display: flex;
    flex-direction: row; 
    justify-content: flex-start;
    height: 1.6em;
    padding: 5px;
    background: yellow; }

.level1 {
    display: flex;
    flex-direction: column; 
    justify-content: flex-start;
    margin: 0.1em;
    padding: 0.2em;
    background: orange; }

.level2 {
    display: none;
    position: relative;
    z-index: 1;
    margin: 0.1em;
    padding: 0.2em;
    top: 0.2em;
    background: orange; }

.level1:hover {
    background: red; }

.level1:hover > .level2 {
    display: block; }

.level3 {
    display: none; 
    margin: 0.1em;
    padding: 0.2em;
    background: orange; }

.level2:hover {
    background: red; }

.level2:hover > .level3 {
    display: block; }

.level3:hover {
    background: yellow; }



<nav class="bnav">
    <div class="level1">TAB1
        <div class="level2">Option 1.1</div>
        <div class="level2">Option 1.2</div></div>
    <div class="level1">TAB2
        <div class="level2">Option 2.1
            <div class="level3">Option2.1.1</div>
            <div class="level3">Option 2.1.2</div></div>   
        <div class="level2">Option 2.2
            <div class="level3">Option 2.2.1</div>
            <div class="level3"><a href="./test.html">Option 2.2.2</a></div></div></div></nav>

Answer 1

我相信通过直接定位链接找到了解决方案。 （想知道为什么我在发布之前没有想到这一点；））

在css中添加了以下规则：

.level3 一个 { 指针事件：无； }

.level3: 悬停在 { 指针事件：自动； }