Your
.backdrop
element appears above the
.navbar
. As soon as you show it, the mouse is no longer hovering over the navbar
<ul>
, so the code triggers to hide the backdrop. At which point, the mouse is again hovering over the
<ul>
, so the code triggers to show the backdrop.
You could add
pointer-events: none;
to the backdrop style, which will work in all modern browsers:
pointer-events - CSS: Cascading Style Sheets | MDN[
^]
This would prevent the flickering, but the backdrop would still appear on top of the navbar.
To make the navbar appear on top of the backdrop, you need to give it a higher z-index. In order to do that, you need to make it a positioned element - for example, by adding
position: relative;
.
Demo[
^]