小编Alm*_*per的帖子

我正在努力做一些非常非常简单的效果.这就是我想要的样子:

当您将鼠标悬停在文本链接上时,我希望在此行下方显示一个小的橙色三角形.我发现的所有响应都使用ul和li来完成这项工作,但这不是我设置代码的方式,也不适用于我正在做的事情.

<nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns">
        <a href="#">Work</a>
      </div>
      <div class="small-3 columns">
        <a href="#">About</a>
      </div>
      <div class="small-3 columns">
        <a href="#">Contact</a>
      </div>
      <div class="small-3 columns">
        <a href="#">Blog</a>
      </div>
    </div>
  </nav>

  <div class="row"><div class="large-9 large-centered columns show-for-medium-up rectangle">&nbsp;</div></div>

我正在使用基础4构建此站点.因为我希望我的链接以某种方式设置并且我希望在我的链接下面有这条白线,我不能使用ul/li方法来获得三角形悬停,甚至是真的display: block;我发现的好方法但根本不适用于我.我想如果我在这两个部分下复制这一部分:

<nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
    </div> …