为何我的左侧Dropdown菜单触发范围覆盖整个屏幕顶部？

当前问题出在.dropdown元素的默认布局上——块级元素默认会占据整个父容器的宽度，哪怕按钮只有100px宽，.dropdown还是会撑满屏幕横向空间。所以只要鼠标在屏幕顶部的任意位置（哪怕远离按钮），都会触发.dropdown:hover，导致下拉菜单显示。

修复方案 #

修改.dropdown的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只包裹按钮宽度 */
.dropdown {
  text-align: left;
  display: inline-block; /* 改为行内块元素，宽度由内容决定 */
  /* 或者直接设置宽度和按钮一致：width: 100px; */
}

.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;
  border-radius: 5px;
}

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

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

改动说明 #

• 添加display: inline-block后，.dropdown的宽度会自动收缩到包裹按钮的大小，只有当鼠标悬停在按钮（或.dropdown包裹的区域）时，才会触发hover效果。
• 也可以直接给.dropdown设置width: 100px，和按钮宽度保持一致，效果相同。

内容的提问来源于stack exchange，提问作者ieatlargefrogs