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

Question

我是 html 和 css 的新手，这是我的第一篇文章，我会尽量讲清楚。

我的元素不用于在线发布，仅供学习。

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

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

现在，我的问题是，虽然打开了 3 级菜单(在我的模型中选择“选项 2.1”)，但此刻我选择了另一个 2 级(在我的模型中，'选项 2.2')，我还选择底层 level3(此处为“选项 2.2.2”)；参见第 2 和第 3 img。这当然是不需要的，因为这会激活指向另一个页面的链接。

我尝试摆弄“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:悬停一个{ 指针事件:自动；