Select options on hover cursor changes to controls behind the dropdown

Question

Now I've a simple HTML. No javascript, no css.

<a href="">Link</a>
<br>
<a href="">Link</a>
<br>
<a href="">Link</a>
<br>
<a href="">Link</a>
<br>
<a href="">Link</a>
<br>
<p>any long short text does not matter
any long short text does not matter</p>
<br>
<p>any long short text does not matter</p>
<br>
<select>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="11">11</option>
   <option value="12">12</option>
   <option value="13">13</option>
   <option value="14">14</option>
   <option value="15">15</option>
   <option value="21">21</option>
   <option value="22">22</option>
   <option value="23">23</option>
   <option value="24">24</option>
   <option value="25">25</option>
</select>
<a href="">Link</a>
<br>
<a href="">Link</a>
<br>
<a href="">Link</a>
<br>
<a href="">Link</a>
<br>
<a href="">Link</a>
<br>
<p>any long short text does not matter
any long short text does not matter</p>
<br>
<p>any long short text does not matter</p>
<br>
  

What you see in Microsoft Edge is exactly what you would expect.... Some links and text and select dropdown. Click on select: and simply hover on the available options.... The cursor behaves as if it would on the elements on the page. If the element below the dropdown is link it changes to pointer, if it is text cursor changes to text cursor(I)

I've played around with z-index and doctype and nothing works. Has anyone had any luck sorting this one out?