html - 调用下拉菜单时最后一个导航链接被推开

Question

出于某种原因，我无法让我的最后一个导航链接与其他人保持一致。如果我将 .dropdown ul li .menu position 设置为绝对位置，我可以做到这一点，但是下 zipper 接被推到右边而不是居中。 Padding-right 和 margin-right 都不能解决这个问题。

JSFiddle

Before

After

Position: Absolute

.title {
  font-family: 'Philosopher', sans-serif;
  margin-left: 20px;
  color: white;
  float: left;
  padding-right: 70px;
  padding-top: 5px;
}

#body {
  background-color: black;
}

.dropdown ul {
  padding-top: 10px;
}

.dropdown ul li .menu {
  position: absolute;
  float: none;
}

.menu-hover-lines {
  margin-top: 35px;
  float: right, bottom;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 3px;
  transition: all 0.35s ease;
}

.menu-hover-lines li a {
  padding: 0.75rem 0;
  color: white;
  position: relative;
  margin-left: 1rem;
  margin-right: 4rem;
  margin-top: 20px;
}

.menu-hover-lines li:first-child a {
  margin-left: 10px;
}

.menu-hover-lines li.active > a {
  background-color: transparent;
}

/* Nav transition settings */
.menu-hover-lines a::before,
.menu-hover-lines a::after {
  height: 3px;
  position: absolute;
  content: '';
  transition: all 0.40s ease;
  background-color: #932929;
  width: 0;
}

.menu-hover-lines a::before {
  top: 0;
  left: 0;
}

.menu-hover-lines a::after {
  bottom: 0;
  right: 0;
}

/* Nav text settings on hover*/
.menu-hover-lines a:hover,
.menu-hover-lines li.active > a {
  color: #8e8e8e;
  transition: all 0.40s ease;
}

.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
  width: 100%;
}

.dropdown li .menu {
  display: none;
}

.dropdown li:hover .menu {
  display: inline-block;
  float: none;
}

<!-- Nav Bar -->
<div class="dropdown" >
     <ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
       <li><a href="#">Home</a></li>
       <li ><a href="#">Collections</a>
          <ul class="menu">
            <li><a href="#">Autos</a></li>
            <li><a href="#">Models</a></li>
            <li><a href="#">Extreme Sports</a></li>
          </ul>
       </li>
       <li><a href="#">About me</a></li>
       <li><a href="">Get in touch</a>
          <ul class="menu">
            <li><a href="#"><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></a></li>
            <li><a href="http://twitter.com"><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></a></li>
            <li><a href="http://instagram.com"><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></a></li>
          </ul>
       </li>
     </ul>
</div>

Answer 1

我认为您需要使用 position:absolute 将 left:0 和 top:100% 添加到您的下拉菜单中。请记住将 position:relative 添加到您的 .menu>li...

我在下拉列表中添加了 .dropdown-menu 类 ul...

我还注意到你在你的 css 中写了 float: right, bottom 这是无效的......

堆栈片段

body {
  font: 13px Verdana;
}

.menu {
  padding: 0;
  display: flex;
}

.menu>li {
  margin: 0 10px;
  list-style: none;
  position: relative;
}

.menu li a {}

.dropdown-menu {
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid;
  padding: 10px;
}

.dropdown-menu>li {
  list-style: none;
}

<!-- Nav Bar -->
<div class="dropdown">
  <ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
    <li><a href="#">Home</a></li>
    <li><a href="#">Collections</a>
      <ul class="dropdown-menu">
        <li><a href="#">Autos</a></li>
        <li><a href="#">Models</a></li>
        <li><a href="#">Extreme Sports</a></li>
      </ul>
    </li>
    <li><a href="#">About me</a></li>
    <li><a href="">Get in touch</a>
      <ul class="menu">
        <li><a href="#"><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></a></li>
        <li><a href="http://twitter.com"><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></a></li>
        <li><a href="http://instagram.com"><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></a></li>
      </ul>
    </li>
  </ul>
</div>