jquery - 如何让我的下拉菜单与导航对齐？

Question

如何让我的导航下拉菜单与它应该放在下面的导航栏对齐？提前致谢。

#navigation {
  float: left;
  width: 100%;
  height: auto;
  color: white;
  background: black;
  margin: 0 auto;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
}
#nav ul {
  margin: 0 auto;
  font-family: "Arial";
  font-weight: 100;
  padding: 10px 45px 10px 10px;
  text-align: center;
}
#nav ul li {
  display: inline;
  margin: 20px 0 0 20px;
  text-decoration: none;
  font-size: 18px;
  border: hidden;
  color: white;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: #FFBE4A;
  color: black;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}

<div id="navigation">
  <div id="nav">
    <ul>
      <li><a href="#OurClubTitle">Our Club</a></li>
      <li><a href="#OurTeamsTitle">Our Teams</a></li>
      <li><a href="#penaltyTitle">Score a Penalty</a></li>
      <li class="dropdown">
        <a href="#contactUsTitle" class="dropbtn">Contact Us</a>
        <div class="dropdown-content">
          <a href="#trainingTitle">Training Nights</a>
        </div>
      </li>
      <li><a href="#extraSpecialTitle">Extra Special</a></li>
    </ul>
  </div>
</div>

非常感谢您的帮助。我是这一切的新手，所以请保持温柔。谢谢

Answer 1

您必须将 position: relative 添加到 .dropdown 并将悬停时的 .dropdown 设置为 left: 0

变化:

li.dropdown {
  display: inline-block;
  position: relative; // added
}

.dropdown:hover .dropdown-content {
  display: block;
  left: 0px; // added
}

#navigation {
  float: left;
  width: 100%;
  height: auto;
  color: white;
  background: black;
  margin: 0 auto;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
}
#nav ul {
  margin: 0 auto;
  font-family: "Arial";
  font-weight: 100;
  padding: 10px 45px 10px 10px;
  text-align: center;
}
#nav ul li {
  display: inline;
  margin: 20px 0 0 20px;
  text-decoration: none;
  font-size: 18px;
  border: hidden;
  color: white;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: #FFBE4A;
  color: black;
}
li.dropdown {
  display: inline-block;
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
  left: 0px;
}

<div id="navigation">
  <div id="nav">
    <ul>
      <li><a href="#OurClubTitle">Our Club</a></li>
      <li><a href="#OurTeamsTitle">Our Teams</a></li>
      <li><a href="#penaltyTitle">Score a Penalty</a></li>
      <li class="dropdown">
        <a href="#contactUsTitle" class="dropbtn">Contact Us</a>
        <div class="dropdown-content">
          <a href="#trainingTitle">Training Nights</a>
          <a href="#trainingTitle">Training Nights</a>
          <a href="#trainingTitle">Training Nights</a>
          <a href="#trainingTitle">Training Nights</a>
        </div>
      </li>
      <li>
          <a href="#extraSpecialTitle">Extra Special</a>     
      </li>

      <li class="dropdown">
        <a href="#contactUsTitle" class="dropbtn">Test</a>
        <div class="dropdown-content">
          <a href="#trainingTitle">one</a>
          <a href="#trainingTitle">two</a>
          <a href="#trainingTitle">three</a>
          <a href="#trainingTitle">four</a>
        </div>
      </li>      
    </ul>
  </div>
</div>