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

Question

我试图以尽可能小的足迹实现这种鼠标悬停效果.我无法显示箭头(.png),它被高度切断,我不知道如何显示高度.到目前为止,我已经尝试了几种失败的方法,希望有人可以帮助我.

我所做的就是为盒子设置样式,并尝试将小箭头放在盒子下面.箭头没有显示在锚点的框外,它被切断了.我尝试将箭头作为LI的一部分,它起作用但是因为锚需要是30px(蓝色框的高度)而LI需要是40px(框+箭头10px的高度)它将显示箭头如果你鼠标悬停在10px区域而不是盒子上.

目前它看起来像这样.

这是我的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小提琴演示.

当然,这确实要求用户具有实现CSS生成的内容和伪元素的浏览器.

编辑回应OP的评论,在下面的评论中:

不确定你是如何从中得到一个形状的,需要解释一下吗？有用.有没有办法让箭头变小,是否可以采用盒子阴影效果？

它起作用是因为元素的边界以45°相交,并且因为没有height/ width为元素产生三角形"指向"元素的中心(或者,在这种情况下,是伪元素).如果所有四个边界都可见,那么你就有一个正方形; 如果顶部和底部可见,你会有一个三角形的"沙漏",依此类推.

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

负容限左侧(-1em在margin声明)必须等于border-width以伪元件居中放置沿水平轴,但它可以被调整以味道.

要添加a 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小提琴演示.