Question

如何让我的导航下拉列表与其应该删除的导航栏对齐？提前谢谢。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

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
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

将位置：相对添加到 li.dropdown ，将左：0; 添加到 .dropdown-content ：

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);
  left: 0;
}

＆＃13;

#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);
  left: 0;
}
.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您需要position: relative;上的li.dropdown获得.dropdown-content绝对位置的参考点，并且您需要使用left: 0;上的.dropdown-content来对齐它的父元素li.dropdown：

#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;
  left: 0;
  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 4

如果您希望它低于特定项目，只需更改您的#nav ul li样式：

#nav ul li {
  display: inline-block;
  margin: 20px 0 0 20px;
  text-decoration: none;
  font-size: 18px;
  border: hidden;
  color: white;
}

Demo

提一下。这种方法将为您的nav元素设置一些余量。这归咎于inline-block。如果您有困难，还可以margin: 0添加#nav ul li。

如何让我的下拉列表与导航器对齐？

4 个答案: