实现这个导航效果的最有效的方式？

Question

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

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

目前是it 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的评论，评论如下：

真的不确定你是如何得到它的形状的，介意解释一下吗？它起作用了。有没有办法让箭头变得更小，并且可以产生方框阴影的效果？

它之所以有效，是因为元素的边界在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。