JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li>Menu #1</li>
        <li>Menu #2</li>
        <li>Menu #3</li>
        <li>Menu #4</li>
    </ul>
</nav>

<section></section>

CSS

ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    padding: 20px;
    color: #000;
    background: transarent;
    z-index: 9999;
}

li { padding: 5px; cursor: pointer; }
li:hover { background: #fff; }

nav {
    z-index:999;
    position: absolute;
    top: 0px; left: 0px;
    background: yellow;
    padding: 20px;
    z-index: 1;
}

section {
    position: absolute;
    top: 0px; left: 0px;
    width: 80px;
    height: 80px;
    background: #ccc;
    z-index: 2;
}

JavaScript

/*

1) NAV должен быть ниже всего
2) SECTION выше NAV
3) UL выше всего
4) NAV должен быть родителем UL
5) SECTION не должен быть внутри NAV, UL