Não removerá as linhas de divisor no mouse sobre

Question

Eu tenho projetado um menu para o meu site. Eu cheguei a um problema com a conversão em HTML/CSS. A idéia é ter uma linha de divisor em cada lado do texto e no mouse sobre as linhas de navegação desaparecerá e mostrará a imagem pairar. Mas tudo o que eu fizer a linha ainda está lá em um dos lados.

Uma imagem do meu menu de navegação

Nav-lnie.png: é apenas a linha Hover.png é toda a imagem do mouseOver

Alguém tem uma solução ou uma explicação como fazer isso?

CSS se parece com o seguinte:

.navigation{
width:370px; 
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}

.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0; 
}

.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}

.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}

E html assim:

<div class="navigation">
    <ul>
       <li><a href="index.php">Videos</a></li>
       <li><a href="top.php">Top Videos</a></li>
       <li><a href="upload_video.php">Upload</a></li>
       <li><a href="faq.php">FAQ</a></li>
    </ul>
</div>

Answer 1

É provavelmente devido ao código de margem que você tem aqui:

.navigation ul li{
    background:url(../images/nav-lnie.png) repeat-y right 0;
    margin:0 2px 0 0; 
}

Como há uma margem de 2px à direita de cada item de menu, a margem esquerda não ficará oculta se você mouse sobre o próximo elemento. Se a margem não for realmente necessária, você pode removê -la e deve funcionar bem, já que há espaço suficiente. Se for necessário, no comando hover, você pode alterar o espaçamento no elemento:

.navigation ul li a:hover{
    background:url(../images/hover.png) repeat-x;
    margin-left: -2px;
    padding-left: 2px;
}

Claro, é um hack difícil resolver o problema. O espaçamento também pode ser ajustado nas duas extremidades.