“ <nav>”和“ <center>”中的下拉菜单未居中

Question

感谢这里的优秀人士，我已修复下拉菜单中的一个问题。现在我有另一个小问题。导航栏中的下拉菜单未居中。应该在“作品”下面，但它移到左侧了。

这是我的代码：

nav {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  margin-bottom: 30px;
  line-height: 1.5em;
  text-decoration: none;
}

nav a,
.dropbtn {
  display: inline;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family: "mrs-eaves";
}

.dropbtn {
  background: none;
  border: none;
}

.dropdown {
  overflow: hidden;
}

.dropdown {
  cursor: pointer;
  font-size: 25px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: "mrs-eaves";
  margin: 0;
  text-decoration: none;
}

nav a:hover,
.dropbtn:hover,
.dropdown:hover,
.dropdown-content a:hover,
.dropbtn:focus {
  background-color: rgb(247, 219, 255);
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  position: relative;
}

.show {
  display: block;
}

<nav>
  <center>
    <a href="index.html">Home</a>
    <button class="dropbtn" onclick="myFunction()">Works
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content" id="myDropdown">
      <a href="drawing.html">Drawing</a>
      <a href="animation.html">Animation</a>
      <a href="design.html">Design</a>
    </div>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a href="links.html">Links</a>
  </center>
</nav>

Answer 1

这是我的解决方案，我用类名为button的{​​{1}}标签包裹了dropdown-content和span，并制作了holder。这样可以确保将position: relative定位到其dropdown-content父对象。

我还删除了span标签上的overflow：hidden属性，因为下拉菜单不可见

我添加了

nav

为了将菜单直接放在 left: -26px; top: 30px; 下方

button

nav {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  /*overflow: hidden;*/
  margin-bottom: 30px;
  line-height: 1.5em;
  text-decoration: none;
}

nav a,
.dropbtn {
  display: inline;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family: "mrs-eaves";
}

.dropbtn {
  background: none;
  border: none;
}

.dropdown {
  overflow: hidden;
}

.dropdown {
  cursor: pointer;
  font-size: 25px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: "mrs-eaves";
  margin: 0;
  text-decoration: none;
}

nav a:hover,
.dropbtn:hover,
.dropdown:hover,
.dropdown-content a:hover,
.dropbtn:focus {
  background-color: rgb(247, 219, 255);
  cursor: pointer;
}

.dropdown-content {
  display: block; /*Added for testing purpose*/
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  
   left: -26px;
   top: 30px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  position: relative;
}

.show {
  display: block;
}

.holder{
position:relative;
}

.center{text-align:center;}