Non rimuoverà le linee divisori sul mouse

Question

Ho progettato un menu per il mio sito web. Ho raggiunto un problema con la conversione in HTML/CSS. L'idea è quella di avere una linea di divisori su ciascun lato del testo e sul mouse sulle linee di navigazione scomparirà e mostrerà l'immagine del mouse. Ma qualunque cosa io faccia la linea è ancora lì su uno dei lati.

Un'immagine del mio menu di navigazione

nav-lnie.png: è solo la linea hover.png è l'intera immagine del mouse

Qualcuno ha una soluzione o una spiegazione come farlo?

CSS sembra così:

.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 come questo:

<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

Molto probabilmente è dovuto al codice margine che hai qui:

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

Dal momento che c'è un margine di 2 px a destra di ogni voce di menu, il margine sinistro non si nascose se il mouse sopra l'elemento successivo. Se il margine non è davvero necessario, puoi rimuoverlo e dovrebbe funzionare bene, dato che c'è abbastanza spazio. Se è necessario, quindi sul comando Hover, è possibile modificare la spaziatura sull'elemento:

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

Certo, è un hack approssimativo risolvere il problema. La spaziatura può essere regolata anche su entrambe le estremità.