Question

我必须复制用于托管服务的网站的页眉和页脚，但是只有一件事我不知道。它与标头中的下拉链接容器有关。

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

我的菜单：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 link to the solution

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

1 个答案: