Why is my menu button activating across the screen?

I recently created a website with a dropdown menu on the left side. However, whenever I'm at the top of the screen, where the dropdown would be on the left, the dropdown activates even when I'm on the other side of the screen. I was expecting it to only activate when I hover over the button itself.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

   .dropbtn {
  background-color: rgb(191, 255, 181);
  padding: 0px;
  font-size: 45px;
  border: none;
  width: 100px;
  height: 100px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #98CC90;
  min-width: 16px;
  border-radius: 5px;
  z-index: 0;
}

.dropdown {
text-align: left;
}

.dropdown-content a {
  color: #182016;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 35px;
   font-family: Arial, sans-serif;
  display: block;
}

.dropdown-content a:hover {background-color: #79A373;}

.dropdown-content a:hover {border-radius: 5px;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: rgb(191, 255, 181);}

<!-- language: lang-html -->

<div class="dropdown">
  <button class="dropbtn"><div class="menu"><img src="https://www.freeiconspng.com/thumbs/menu-icon/menu-icon-6.png"/></div></button>
  
  <div class="dropdown-content">
    <a onclick="window.location.href='https://ieatlargefrogs.com/about-me.html';">About me</a>
    <a onclick="window.location.href='https://ieatlargefrogs.com/dnilist.html';">DNI List</a>
    <a onclick="window.location.href='https://ieatlargefrogs.com/website.html';">Website Stuff</a>
  </div>
</div>`

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.dropbtn {
  background-color: rgb(191, 255, 181);
  padding: 0px;
  font-size: 45px;
  border: none;
  width: 100px;
  height: 100px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #98CC90;
  min-width: 16px;
  border-radius: 5px;
  z-index: 0;
}

.dropdown {
text-align: left;
}

.dropdown-content a {
  color: #182016;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 35px;
   font-family: Arial, sans-serif;
  display: inline-block;
}

.dropdown-content a:hover {background-color: #79A373;}

.dropdown-content a:hover {border-radius: 5px;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: rgb(191, 255, 181);}

<!-- end snippet -->

try setting the display of the a tags to inline block. The problem is that block display will stretch over the entire width of the container on default.

alternatively you can set a width to the dropdown-content

As you have mentioned in the question, you want the dropdown-content to be displayed only when the button is hovered. But for hovering the dropdown-content, it has to remain displayed even when dropdown-content is hovered.
So I have modified your code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.dropbtn {
  background-color: rgb(191, 255, 181);
  padding: 0px;
  font-size: 45px;
  border: none;
  width: 100px;
  height: 100px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #98CC90;
  min-width: 16px;
  border-radius: 5px;
  z-index: 0;
}

.dropdown {
text-align: left;
}

.dropdown-content a {
  color: #182016;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 35px;
   font-family: Arial, sans-serif;
  display: block;
}

.dropdown-content a:hover {background-color: #79A373;}

.dropdown-content a:hover {border-radius: 5px;}

.dropbtn:hover + .dropdown-content, .dropdown-content:hover {display: block;}

.dropdown:hover .dropbtn {background-color: rgb(191, 255, 181);}

<!-- language: lang-html -->

<div class="dropdown">
  <button class="dropbtn"><div class="menu"><img src="https://www.freeiconspng.com/thumbs/menu-icon/menu-icon-6.png"/></div></button>
  
  <div class="dropdown-content">
    <a onclick="window.location.href='https://ieatlargefrogs.com/about-me.html';">About me</a>
    <a onclick="window.location.href='https://ieatlargefrogs.com/dnilist.html';">DNI List</a>
    <a onclick="window.location.href='https://ieatlargefrogs.com/website.html';">Website Stuff</a>
  </div>
</div>`

<!-- end snippet -->

Please ensure that there is always positional continuity between dropbtn and dropdown-content. Otherwise, it will not be possible to hover the dropdown-content.