Ne supprimera pas les lignes de diviseur sur la souris

Question

J'ai conçu un menu pour mon site Web. J'ai atteint un problème avec la conversion en HTML / CSS. L'idée est d'avoir une ligne de diviseur de chaque côté du texte et sur la souris sur les lignes de navigation disparaîtra et affichera l'image de survol. Mais quoi que je fasse, la ligne est toujours là sur l'un des côtés.

Une image de mon menu de navigation

nav-lnie.png: n'est que la ligne Hover.png est l'image entière de Mouseover

Quelqu'un a-t-il une solution ou une explication comment procéder?

CSS ressemble à ceci:

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

Et html aime ceci:

<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

C'est probablement dû au code de marge que vous avez ici:

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

Puisqu'il y a une marge 2px à droite de chaque élément de menu, la marge gauche ne sera pas cachée si vous souris sur l'élément suivant. Si la marge n'est pas vraiment nécessaire, vous pouvez le supprimer et cela devrait fonctionner correctement, étant donné qu'il y a suffisamment d'espace. Si c'est nécessaire, alors sur la commande de survol, vous pouvez modifier l'espacement sur l'élément:

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

Bien sûr, c'est un hack brut pour résoudre le problème. L'espacement peut également être ajusté aux deux extrémités.