小编Sir*_*tic的帖子

我试图以尽可能小的足迹实现这种鼠标悬停效果.我无法显示箭头(.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>