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

Question

作为 html 和 css 的新手，这是我的第一个 post，我会尽量说清楚。

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

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

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

现在，我的问题是，虽然打开了 3 级菜单（在我的模型中 selecting 'option 2.1'），此刻我 select 另一个 level2（在我的模型中，'option 2.2'），我也 select底层的level3（这里是'option 2.2.2'） ;参见第 2 和第 3 img。这当然是不需要的，因为这会激活 link 到另一个页面。

我尝试摆弄 '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

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

向 css 添加了以下规则：

.level3 { 指针事件：none； }

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

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

flexbox dropdown menu, menu intentionally overlapping submenu links

css

overlap

submenu

flexbox

drop-down-menu