实现这种导航效果的最有效方法是什么？

Question

我正在尝试以尽可能小的占用空间实现this 鼠标悬停效果。我无法显示箭头（.png），它被高度切断，我不确定如何显示高度。到目前为止我已经尝试了几种失败的方法，希望有人可以帮助我。

我所做的是设置框的锚点样式并尝试将小箭头定位在框下方。箭头没有显示在锚框的外部，它被切断了。我尝试使箭头成为 LI 的一部分，它起作用了，但是因为锚需要是 30px（蓝色框的高度）并且 LI 需要是 40px（框 + 箭头的高度 10px）它会显示箭头如果您将鼠标悬停在该 10px 区域而不是框上。

目前是looks like this。

这是我的 CSS：

#navlist {
float:right;
}
#navlist li {
line-height:40px;
display:inline;
list-style-type: none;
margin-right: 20px;
}
#navlist li:hover {
background:url(../img/navArrow.png) no-repeat center;
background-position:50% 30px;
}
#navlist li a {
height:30px;
padding:3px 5px 3px 5px;
color:#26627f;

}
#navlist li a:hover {
background:#035173;
border-radius:3px;
color:#fff;
}

这里是html：

<ul id="navlist">
    <li><a href="#">Get a Quote</a></li>
    <li><a href="#">Learn about Life Insurance</a></li>
    <li><a href="#">Our Company</a></li>
    <li><a href="#">Get Help</a></li>
</ul>

Answer 1

您可以简单地将以下内容添加到您的 CSS：

#navlist li:hover a::after,
#navlist li a:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -1em;
    border: 1em solid transparent;
    border-top-color: #035173;
}​

JS Fiddle demo.

当然，这确实要求用户拥有一个实现 CSS 生成的内容和伪元素的浏览器。

---

已编辑以回应 OP 的评论，在下面的 cmets 中：

不太清楚你是如何从中得到一个形状的，想解释一下吗？有用。有什么办法可以让箭头变小，可以带box-shadow的效果吗？

之所以起作用，是因为元素的边界在 45° 处相遇，并且因为没有 height/width 用于产生三角形“指向”元素中心的元素（或者，在这种情况下，伪元素）。如果所有四个边框都可见，那么您将有一个正方形；如果顶部和底部可见，您将有一个三角形的“沙漏”，等等。

要使三角形更小，只需为边框宽度分配一个更小的单位（在上面的示例中，边框设置为1em，只需将其更改为5px，或者，任何其他大小和单位浏览器可以实现的度量。

负边距-left（margin 声明中的-1em）必须等于border-width，以便将伪元素沿水平轴居中放置，但可以根据口味进行调整.

添加box-shadow 很困难，因为必须分配所有四个边框才能创建三角形，box-shadow 将是整个元素的矩形，而不仅仅是它的“可见”部分。如果您可以使用另一个伪元素（在本例中为 ::before），则可以对其进行模拟，但它不会像真正的 box-shadow 那样具有通常的“模糊性”，但作为演示，只需复制上面的 CSS，将 ::after 修改为 ::before（并确保 ::before 元素出现在 ::after 的声明之前，因为稍后声明的元素将在之前声明的元素之上-声明的元素）。调整边距和border-top-color 属性，它应该看起来不错：

#navlist li:hover a::before,
#navlist li a:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -0.7em;
    border: 1em solid transparent;
    border-top-color: #ccc;
}

#navlist li:hover a::after,
#navlist li a:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -1em;
    border: 1em solid transparent;
    border-top-color: #035173;
}​

JS Fiddle demo.