CSS汉堡下拉菜单点击切换时向左偏移的问题求助

问题出在 hover 时给汉堡按钮加了 float: none，直接破坏了它的右侧对齐布局。另外原代码里的一些布局设置也有问题，按下面的修改就能解决：

关键修改点 #

• 删掉 .dropdown:hover .dropbtn 里的 float: none，这是偏移的核心原因
• 给 .dropdown 设置弹性布局，让三个汉堡按钮垂直靠右排列，避免错位
• 调整导航栏高度（原4%高度太小，按钮容易显示不全）
• 改用绝对定位下拉菜单，避免float影响父元素布局

修改后的完整代码 #

CSS #

.navbar {
  background-color: #1a1a1a;
  width: 100%;
  height: 50px; /* 改成固定高度，避免%高度导致显示异常 */
  position: absolute;
  z-index: 2;
}

.navbar a {
  font-size: 16px;
  color: white; /* 原文字色和导航栏背景同色，改成白色才能看见 */
  text-align: right;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: right;
  overflow: visible; /* 改成visible，避免下拉菜单被截断 */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 让汉堡按钮靠右对齐 */
  padding: 8px 10px; /* 给容器加内边距，避免按钮贴边 */
}

.dropdown .dropbtn {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 3px 0; /* 调整上下间距，去掉左右margin避免偏移 */
  border: none;
  outline: none;
  z-index: 30;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #FFBB00;
}

.dropdown-content {
  display: none;
  position: absolute; /* 绝对定位，不影响父元素布局 */
  top: 50px; /* 和导航栏高度一致，刚好在下方 */
  right: 0; /* 靠右对齐 */
  background-color: #1a1a1a6c;
  min-width: 160px;
  z-index: 30;
}

.dropdown-content a {
  float: none;
  display: block;
  color: white;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: rgba(0, 0, 0, 0.458);
  color: #FFBB00;
}

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

HTML #

<div class="navbar">
    <div class="dropdown">
        <div class="dropbtn"></div>
        <div class="dropbtn"></div>
        <div class="dropbtn"></div>
        <div class="dropdown-content">
            <a href="index.html">HOME</a>
            <a href="shop.html">SHOP</a>
            <a href="contact.html">CONTACT</a>
        </div>
    </div>
</div>

这样修改后，汉堡按钮在 hover 时会保持右侧原位置，下拉菜单也会靠右对齐显示。

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