Html 创建一个带有如下选择器幻觉的导航栏

我正在做我的一个项目，我有一个相对有趣的想法，看起来很不错，唯一的问题是，我真的不知道如何实现它

事情是这样的。我已经设置了导航栏，它看起来像这样

现在为了便于说明，我在它下面画了一个小箭头。与现在一样，它只是一个单独的

放置在导航栏下，并应用边距使其看起来像在导航栏下

基本上，我想实现的是，每当你将鼠标悬停在导航栏的某个部分上，箭头就会在它下面移动。为了这篇文章的简单性和可读性，让我们不要讨论任何动画和平滑性，我真正想要的是箭头从原始位置消失，并重新出现在所需（悬停）位置下

你有什么建议吗？什么是实现这一目标的最好（也是最简单）方法

理想情况下，我更喜欢只使用HTML/CSS

到目前为止，我找到的唯一解决方案可能是为导航栏中的每个项目创建一个单独的箭头

设定为

.nav img {
 display: inline-block;
 visbility: hidden;
}

然后创建

.nav img:hover {
 visiblity: visible;
}

现在这个问题有很多

1） 这意味着，人们需要将鼠标悬停在它下面的箭头上，在导航栏上显示实际的项目

2） 我需要手动为每个箭头留出边距，使其适合每个菜单项

3） 虽然这会在我的屏幕上工作，但如果你切换到任何不同的分辨率，它们的边距将被关闭

如果你们有什么建议，我很想听听

---

---

---

编辑：我实际上想出了一个解决方案，我可以简单地创建一个下拉菜单（另一个ul）并将图像放在那里。不过，如果您还有更直观、更好的解决方案，我很乐意查看。

如果我正确理解了您的问题，您可以在不使用任何图像的情况下执行以下操作来实现这一点。我已经添加了active类，并给它一个独特的颜色来显示您当前正在查看的页面，然后悬停效果将以不同的颜色显示。选择器将是一个带有纯css三角形的psuedo元素，并将在悬停时显示

这里有一把小提琴来向你展示这一点

以及标记：

<nav>
  <ul>
    <li><a class="active" href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

单击，然后检查阿隆索样式（列表中的第一个）。

nav{
  text-align: center;
  background: #000;
}
nav ul{
  list-style-type: none;
  padding: 0;
  margin:0;
}
nav li{
  display:inline-block;
  position: relative
}
nav li a{
  color: #fff;
  padding: 10px;
  display: inline-block;
  text-decoration: none;
}
nav li a:before{
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid rgba(200,200,200,1);
  position: absolute;
  bottom:-20px;
  left:0;right: 0;
  margin: 0 auto;
  content:'';
  opacity: 0;
  -ms-transition: opacity 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out;
  -webkit-transition: opacity 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}
nav li a.active:before{
  opacity: 1;
  border-top: 20px solid red;
}
nav li a:hover:before{
  opacity: 1;
}