No eliminará las líneas divisoras en el mouse sobre

Question

He estado diseñando un menú para mi sitio web. He llegado a un problema para convertir en HTML/CSS. La idea es tener una línea de divisor en cada lado del texto y en el mouse sobre las líneas de navegación desaparecerá y mostrará la imagen de desplazamiento. Pero lo que sea que haga, la línea todavía está allí en uno de los lados.

Una imagen de mi menú de navegación

nav-lnie.png: es solo la línea hover.png es toda la imagen del ratón

¿Alguien tiene una solución o una explicación de cómo hacer esto?

CSS se ve así:

.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;
}

Y html como este:

<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

Lo más probable es que se deba al código de margen que tiene aquí:

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

Dado que hay un margen de 2px a la derecha de cada elemento de menú, el margen izquierdo no se ocultará si mouse sobre el siguiente elemento. Si el margen no es realmente necesario, puede eliminarlo y debería funcionar bien, dado que hay suficiente espacio. Si es necesario, entonces en el comando flotante, puede cambiar el espacio en el elemento:

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

Por supuesto, es un truco aproximado para solucionar el problema. El espacio también se puede ajustar en ambos extremos.