导航栏下拉菜单稍微靠右

Question

所以，我正在尝试制作一个导航栏下拉菜单，但是当我将鼠标悬停在“伦敦”选项卡上时，下拉菜单略微位于右侧。我不知道为什么会这样，我不知道为什么它不在伦敦选项卡下居中而且我也尝试了多种解决方案（过去有效），例如，我尝试做 left: 0px; 或 right: 0px; 但这只是将下拉菜单放在屏幕的左侧或右侧。

我不知道如何使下拉菜单居中，所以它就在伦敦选项卡的下方。如有任何帮助或建议，我们将不胜感激！

body {
    margin: 0;
}
.nav {
    background-color: rgb(24, 24, 24);
    box-shadow: 10px 10px 10px white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 3em;
    justify-content: center;
}
.navlogo img {
    height: 40px;
}
.dropbtn {
    color: rgb(53, 53, 53);
    font-family: Montserrat;
    font-size: 18px;
    border: none;
    transition: all 200ms ease-in;
}
.drop-content-london {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 69.8px;
    text-align: center;
}
.drop-content-london a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: all 200ms ease-in;
    font-size: 12px;
}
.dropdown {
    transition: all 200ms ease-in;
    border-radius: 10px;
    padding: 1em;
}
.dropdown:hover .drop-content-london {display: block;}

.drop-content-london a:hover {background-color: #ddd;}

.drop-content-paris {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 57px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 69.8px;
    text-align: center;
}
.drop-content-paris a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: all 200ms ease-in;
    font-size: 9px;
}
.drop-content-paris {
    transition: all 200ms ease-in;
}
.dropdown:hover .drop-content-paris {display: block;}

.drop-content-paris a:hover {background-color: #ddd;}

.drop-content-tokyo {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 63px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 69.8px;
    text-align: center;
}
.drop-content-tokyo a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;    
    transition: all 200ms ease-in;
    font-size: 10px;
}
.drop-content-tokyo {
    transition: all 200ms ease-in;
}
.dropdown:hover .drop-content-tokyo {display: block;}

.drop-content-tokyo a:hover {background-color: #ddd;}

.dropdown:hover .dropbtn {
    text-decoration: underline 2px rgba(255, 0, 0, 0.733);
    text-underline-offset: 6px;
    color: rgb(199, 199, 199);
}
@media only screen and (min-width: 530px) {
    .dropbtn {
        margin: 0.5rem 1rem;
    }
    .drop-content-london {
        width: 131.73px;
    }
    .drop-content-tokyo {
        width: 106.61px;
    }
    .drop-content-paris {
        width: 114.53px;
    }
    .drop-content-london a {
        font-size: 16px;
    }
    .drop-content-tokyo a {
        font-size: 16px;
    }
    .drop-content-paris a {
        font-size: 16px;
    }
}

        <nav>
            <div class="nav">
                <div class="navlogo">
                    <img src="logo.png" alt="">
                </div>
                <div class="dropdown">
                    <div class="dropbtn">London</div>
                    <div class="drop-content-london">
                        <a href="#" target="_">Overview</a>
                        <a href="https://en.wikipedia.org/wiki/London" target="_">Wikipedia</a>
                        <a href="#">Gallery</a>
                    </div>
                </div>
                <div class="dropdown">
                    <div class="dropbtn">Paris</div>
                    <div class="drop-content-paris">
                        <a href="#">Overview</a>
                        <a href="#">Wikipedia</a>
                        <a href="#">Gallery</a>
                    </div>
                </div>
                <div class="dropdown">
                    <div class="dropbtn">Tokyo</div>
                    <div class="drop-content-tokyo">
                        <a href="#">Overview</a>
                        <a href="#">Wikipedia</a>
                        <a href="#">Gallery</a>
                    </div>
                </div>
            </div>
        </nav>

Answer 1

似乎问题的根源在于保证金，以及 drop-content-"country" classes 上的绝对定位。您会注意到，如果从 class 中删除 display: none; 和 position: absolute;，则下拉内容完全居中。（只要将 text-align: center; 添加到 dropbtn 即可）。但这会扰乱菜单本身的功能。

不用担心，有一个简单的修复方法。只需将这些样式添加到您的 dropdown class.

.dropdown {
  display: inline-flex;
  justify-content: center;
}

看到它在这里工作：

body {
  margin: 0;
}

.nav {
  background-color: rgb(24, 24, 24);
  box-shadow: 10px 10px 10px white;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 3em;
  justify-content: center;
}

.navlogo img {
  height: 40px;
}

.dropbtn {
  color: rgb(53, 53, 53);
  font-family: Montserrat;
  font-size: 18px;
  border: none;
  transition: all 200ms ease-in;
}

.drop-content-london {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  top: 69.8px;
  text-align: center;
}

.drop-content-london a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: all 200ms ease-in;
  font-size: 12px;
}

.dropdown {
  transition: all 200ms ease-in;
  border-radius: 10px;
  padding: 1em;
  display: inline-flex;
  justify-content: center;
}

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

.drop-content-london a:hover {
  background-color: #ddd;
}

.drop-content-paris {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 57px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  top: 69.8px;
  text-align: center;
}

.drop-content-paris a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: all 200ms ease-in;
  font-size: 9px;
}

.drop-content-paris {
  transition: all 200ms ease-in;
}

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

.drop-content-paris a:hover {
  background-color: #ddd;
}

.drop-content-tokyo {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 63px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  top: 69.8px;
  text-align: center;
}

.drop-content-tokyo a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: all 200ms ease-in;
  font-size: 10px;
}

.drop-content-tokyo {
  transition: all 200ms ease-in;
}

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

.drop-content-tokyo a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropbtn {
  text-decoration: underline 2px rgba(255, 0, 0, 0.733);
  text-underline-offset: 6px;
  color: rgb(199, 199, 199);
}

@media only screen and (min-width: 530px) {
  .dropbtn {
    margin: 0.5rem 1rem;
  }
  .drop-content-london {
    width: 131.73px;
  }
  .drop-content-tokyo {
    width: 106.61px;
  }
  .drop-content-paris {
    width: 114.53px;
  }
  .drop-content-london a {
    font-size: 16px;
  }
  .drop-content-tokyo a {
    font-size: 16px;
  }
  .drop-content-paris a {
    font-size: 16px;
  }
}

<nav>
  <div class="nav">
    <div class="navlogo">
      <img src="logo.png" alt="">
    </div>
    <div class="dropdown">
      <div class="dropbtn">London</div>
      <div class="drop-content-london">
        <a href="#" target="_">Overview</a>
        <a href="https://en.wikipedia.org/wiki/London" target="_">Wikipedia</a>
        <a href="#">Gallery</a>
      </div>
    </div>
    <div class="dropdown">
      <div class="dropbtn">Paris</div>
      <div class="drop-content-paris">
        <a href="#">Overview</a>
        <a href="#">Wikipedia</a>
        <a href="#">Gallery</a>
      </div>
    </div>
    <div class="dropdown">
      <div class="dropbtn">Tokyo</div>
      <div class="drop-content-tokyo">
        <a href="#">Overview</a>
        <a href="#">Wikipedia</a>
        <a href="#">Gallery</a>
      </div>
    </div>
  </div>
</nav>

导航栏下拉菜单稍微靠右

Navbar dropdown menu placed slighly to the right

html

css

navbar

flexbox

drop-down-menu