使用一个小白条添加菜单项的悬停状态

Question

考虑以下结构：

<ul>
    <li><a href="">Home</a><img src="menu_hover_line.jpg" class="whiteBarHover" /></li>
    <li><a href="">Contacts</a><img src="menu_hover_line.jpg" class="whiteBarHover" /></li>
</ul>

这里是一个“a”块元素（display：block;），它是一个菜单元素，左右有一定的高度和填充：

li
{
display:inline-block;
float:left;
position:relative;  
}
a
{
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#131313;
    display:block;
    line-height:51px;
    padding:0px 29px;
}
a:hover
{
    background-color:#000;
    border:0 none;
    color:#FFF;
} 
.whiteBarHover
{
    width:40px;
    height:3px;
    position:absolute;
    top:2px;
    visibility:hidden;
}
div#menu li:hover img.whiteBarHover
{
    visibility:visible;
}

每个“li”中“img”和相关css代码的要点是显示如下图像

menu_hover_line.jpg =＆gt;

在每个菜单项的顶部中心悬停事件。一切都完成了。但图像不在水平方向的中心。我怎么能把它集中起来？

Answer 1

如果是p osition absolute，则必须定义left:50%＆amp; margin-left:-20px;图像宽度的一半。像这样：

.whiteBarHover
{
    width:40px;
    height:3px;
    position:absolute;
    top:2px;
    left:50%;
    margin-left:-20px;
    visibility:hidden;
}

选中此http://jsfiddle.net/BrURq/