Why the links in the lower third of the buttons don't work?

I have a pure CSS Dropdown button and would like to keep it without JS.

However, I have the following problem; as soon as I click on the bottom third of one of the button links, only the Dropdown menu closes but the link is not opening. The links only work from the beginning of the text (up from the bottom). Everything below the text is not clickable or does not open the link. Everything above the beginning of the text is working fine. I hope I have described my problem understandably enough.

So my question is of course: where is my error or what do I have to fix in my code so that the entire surface of the buttons become clickable links?

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
h1 {
  color: white;
}
/* Dropdown container start */
.dropdown {
  display: inline-block;
  position: relative;
  margin: 10px 0 0 0;
}

/* button */
.dropbtn {
  padding: 8px 12px;
  color: white;
  background-color: #121212;
  border: 1.5px solid white;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.25s ease-out;
}

/* Dropdown content */
.dropdown .dropdown-content {
  position: absolute;
  border-radius: 3px;
  top: 50%;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: 0.25s ease-out;
}
.dropdown-content a {
  color: black;
  background-color: #f0f0f0;
  border-radius: 3px;
  margin-top: 3px;
  padding: 8px 12px;
  display: block;
  text-decoration: none;
  transition: 0.25s ease-out;
  width: 130px;
}
.dropdown-content a:hover {
  background-color: lightgray;
}

/* show Dropdown content */
.dropdown:focus .dropdown-content {
  outline: none;
  transform: translateY(20px);
  visibility: visible;
  opacity: 1;
}

.dropbtn:hover, .dropdown:focus .dropbtn {
  background-color: #f0f0f0;
  color: black;
  border: 1.5px solid #f0f0f0;
}

/* mask to close menu by clicking on the button */
.dropdown .db2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  display: none;
}
.dropdown:focus .db2 {
  display: inline-block;
}
</style>
</head>
<body>
  <h1>My example Website</h1>
<div class="dropdown" tabindex="1" title="Open the main menu">
  <div class="db2" tabindex="1"></div>
  <a class="dropbtn">My menu</a>
   <div class="dropdown-content">
  <a href="javascript:;">Link 1</a>
  <a href="random-en.html">Link 2</a>
  <a href="3d-en.html">Link 3</a>
  <a href="info-en.html">Link 4</a>
  <a href="c_en/hashtag.html">Link 5</a>
   </div>
</div>

</body>
</html>

Solution

Ok, I have now my final CSS Dropdown solution that seem to work for me. I get inspired by this website https://lage.us/CSS-Onclick-Dropdown-Menu.html and its very slim code.

Thanks anyway to everyone who helped and gave some thought to the problem.

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}

h1 {
  color: white;
}


/*start of the dropdown container*/

.menutop {
  position: relative;
  display: inline-block;
  z-index: 2;
  margin-top: 1px;
  outline: 0;
  text-align: left;
  cursor: pointer;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  background: #121212;
  color: white;
  padding: 5px 10px;
}

.menutop:hover {
  border: 2px solid #f0f0f0;
  background: #f0f0f0;
  color: black;
}


/*labeling of the left button*/

.menutop::before {
  content: "\2630 \a0 Menu";
  padding: 5px 10px;
}

.menutop:focus {
  pointer-events: none;
}


/*If :focus detected the dropdown menu is displayed by making it visible*/

.menutop:focus .menutop-dropdown {
  opacity: 1;
  visibility: visible;
}


/*style for the dropdown box*/

.menutop-dropdown {
  background: transparent;
  width: auto;
  margin-top: 6px;
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: visibility 1s;
}


/*style the links in the dropdown*/

.menutop-dropdown a {
  background: #f0f0f0;
  margin: 6px 0 0 -12px;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  outline: 0;
  display: inline-block;
  color: black;
  text-decoration: none;
  width: 140px;
  padding: 8px;
}

.menutop-dropdown a:hover {
  background: #121212;
  border: 2px solid white;
  color: white;
}

<h1>My example Website</h1>

<div tabindex="0" class="menutop">
  <div class="menutop-dropdown">
    <a href="javascript:;">Link 1</a>
    <a href="javascript:;">Link 2</a>
    <a href="javascript:;">Link 3</a>
    <a href="javascript:;">Link 4</a>
    <a href="javascript:;">Link 5</a>
  </div>
</div>