html - 需要更改下拉菜单容器对齐方式

Question

我必须复制网站的页眉和页脚以用于托管服务，但只有一件事我无法弄清楚。它与标题处的下 zipper 接容器有关。

如果您查看他们的菜单，会发现下拉框位于父链接下方的中央。我的下拉容器左对齐，这意味着我的下 zipper 接容器的左边缘从父链接的左边缘开始。

我的页面:https://schw.im/wix1/index.html

我的菜单:https://i.imgur.com/GU62FoMm.png

原始页面:https://thetechguysnc.wixsite.com/website

他们的菜单:https://i.imgur.com/FoAdpcPm.png

如何将容器置于父链接下方？

.nondropbtn a:hover {
  color: #BBB09E;
}

.dropbtn {
  color: #FF01FF;
  padding: 6px;
  font-size: 16px;
  font-family: RalewayBold, sans-serif;
  border: none;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #597EA5;
  white-space: nowrap;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  font-size: 16px;
  font-family: RalewayBold, sans-serif;
}

.dropdown-content a {
  color: #FFFFFF;
  padding: 5px 7px;
  text-decoration: none;
  display: block;
  -o-transition: color .2s ease-out, background 2s ease-in;
  -ms-transition: color .2s ease-out, background 2s ease-in;
  -moz-transition: color .2s ease-out, background 2s ease-in;
  -webkit-transition: color .2s ease-out, background 2s ease-in;
  transition: color .2s ease-out, background 2s ease-in;
}

.dropdown-content a:hover {
  color: #bbb0a5;
}

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

<div id="header">
  <h1 class="htitle">Your Mountain Dreams</h1>
  <div id="header-content">
    <div class="dropdown">
      <div class="nondropbtn"><a href="#">Home</a></div>
    </div>
    <div class="dropdown">
      <div class="nondropbtn"><a href="#">About</a></div>
    </div>
    <div class="dropdown">
      <div class="nondropbtn"><a href="#">News</a></div>
    </div>
    <div class="dropdown">
      <div class="dropbtn">Search MLS</div>
      <div class="dropdown-content">
        <a href="#">Featured Listings</a>
        <a href="#">Quick Search</a>
        <a href="#">Basic Search</a>
        <a href="#">Advanced Search</a>
      </div>
    </div>
    <div class="dropdown">
      <div class="nondropbtn"><a href="#">Photo Gallery</a></div>
    </div>
    <div class="dropdown">
      <div class="dropbtn">Area Info</div>
      <div class="dropdown-content">
        <a href="#">Area Schools</a>
        <a href="#">Area Entertainment</a>
        <a href="#">Professional Contacts</a>
      </div>
    </div>
    <div class="dropdown">
      <div class="nondropbtn"><a href="#">Testimonials</a></div>
    </div>
    <div class="dropdown">
      <div class="nondropbtn"><a href="#">Contact</a></div>
    </div>
  </div>
</div>

Answer 1

在这种情况下你必须使用绝对属性。尽管在响应式设计的情况下，您必须相应地调整代码。由于您的问题是关于桌面屏幕设计，这里是解决它的方法。我已将类添加到相应的下拉父类并添加了这些属性:

.dropdown__search-mls {
 left: -20%;
}
.dropdown__area-info {
  left: -60%;
}

你可以引用这个 fiddle :Fiddle link to the solution