Why is my menu button activating across the screen?

May 17, 2023

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.

   .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);}

<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>`

>Solution :

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.

.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);}

<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>`

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