Question

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

.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

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

我在下拉列表.dropdown-menu ...

中添加了ul类

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

Stack Snippet

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>

调用下拉时，最后一个导航链接被推开

1 个答案: