Question

当我将鼠标悬停在每个导航项目的中间时，我试图将我的css三角形居中。此时三角形位于每个项目的前置字母下方。我该怎么做？

如果我删除position：absolute，它将删除我的三角形。我该如何解决这个问题？

＆＃13;

.current {
  color: #FFF;
  text-decoration: underline;
}

nav a:hover:after {
  content: "";
  display: block;
  border: 8px solid #405580;
  border-bottom-color: #fff;
  position: absolute;
  bottom: 0px;
}

＆＃13;

<header>
  <a href="#" id="logo"></a>
  <nav>
    <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

＆＃13;

Answer 1

您可以尝试制作O(n)亲戚，然后制作<a> nav a :hover :after。我已经添加了relative来向下推动箭头，现在由你决定如何做到这一点，而不是硬编码。：）

margin-top

https://codepen.io/daveRanjan/pen/yXyWwR

Answer 2

由于您已将三角形创建为:after伪元素，因此您可以将其设置为相对于nav a的位置。将position: absolute保留在三角形上，只需将其bottom定位调整到您想要的位置即可。为nav a创建一个新的样式元素并添加到position: relative。见下文。

＆＃13;

.current {
  color: #FFF;
  text-decoration: underline;
}

nav a {
   position: relative;
}

nav a:hover:after {
  content: "";
  display: block;
  border: 8px solid #405580;
  border-bottom-color: #fff;
  position: absolute;
  left: 50%;
  bottom: -16px;
}

＆＃13;

<header>
  <a href="#" id="logo"></a>
  <nav>
    <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

＆＃13;

悬停HTML上的CSS3中心三角形

2 个答案: