Notice the links are not highlighting under the ovelay
<div class="overlay overlay1"></div>
<div class="overlay overlay2"></div>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<li><a href="#">Item 3</a>
<li><a href="#">Item 4</a>
<li><a href="#">Item 5</a>
<li><a href="#">Item 6</a>
<li><a href="#">Item 7</a>
<li><a href="#">Item 8</a>
<li><a href="#">Item 9</a>
<li><a href="#">Item 10</a>
<li><a href="#">Item 11</a>
<li><a href="#">Item 12</a>
<li><a href="#">Item 13</a>
<li><a href="#">Item 14</a>
If you add pointer-events: none to the overlay, the overlays will no longer get in the way, as if they do not exist.
<div class="overlay nonexistent overlay1"></div>
<div class="overlay nonexistent overlay2"></div>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<li><a href="#">Item 3</a>
<li><a href="#">Item 4</a>
<li><a href="#">Item 5</a>
<li><a href="#">Item 6</a>
<li><a href="#">Item 7</a>
<li><a href="#">Item 8</a>
<li><a href="#">Item 9</a>
<li><a href="#">Item 10</a>
<li><a href="#">Item 11</a>
<li><a href="#">Item 12</a>
<li><a href="#">Item 13</a>
<li><a href="#">Item 14</a>
<li>adding button-like elements on top of select boxes.</li>
<li>clicking through stylistic overlays like in the example.</li>