flexbox dropdown menu, menu intentionally overlapping submenu links

Question

being new to html and css, and this being my first post, i'll try to be as clear as i can.

My project is not intended for publishing online, but for learning purposes only.

I'm trying to build a dropdown menu using flexbox. The menu has 3 levels. The 1st level is tab-style. The 2nd level is dropdown; see 1st img.

The 3rd level, initially hidden, i want to be nested within the 2nd when shown, directly below it's parent; see 2nd img.

Now, my problem is that, while having opened a level3 menu (in my mock up by selecting 'option 2.1'), at the moment i select another level2 (in my mock up, 'option 2.2'), i also select the underlying level3 (here being 'option 2.2.2'); see 2nd and 3rd img. This, of course, is unwanted since that would activate the link to another page.

I have tried fiddling about with 'pointer-events', 'z-index' and 'position', 'visibility', but can't get things to work. Of course i have googled the problem, but the hits i found refer to removing overlap rather than intentionally creating it...

Any help will be greatly appreciated!

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>

blissful_ignorant blissful_ignorant · Accepted Answer · 2019-09-16T13:13:35

I believe to have found a solution by directly targeting the link. (wondering why i didn't think of that before posting ;) )

Added the following rules to the css:

.level3 a { pointer-events: none; }

.level3:hover a { pointer-events: auto; }

flexbox dropdown menu, menu intentionally overlapping submenu links

1 Answers