Добавить состояние наведения для пункта меню с маленькой белой полосой

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 - это элемент блока «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;
}

Смысл "img" и соответствующего кода CSS в каждом "li" должен иметь изображение, показанное ниже

menu_hover_line.jpg =>

при наведении курсора вверху в центре каждого пункта меню.Все сделано.но изображение не в центре в горизонтальном направлении.Как мне это отцентрировать?

Answer 1

Если это p osition absolute, тогда вы должны определить left:50% & margin-left:-20px; половину ширины изображения. как это:

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

Проверьте это http://jsfiddle.net/BrURq/