Entfernen Sie die Trennlinien auf der Maus nicht

Question

Ich habe ein Menü für meine Website entworfen. Ich habe ein Problem mit der Konvertierung in HTML/CSS erreicht. Die Idee ist, eine Trennlinie auf jeder Seite des Textes zu haben, und auf der Maus über die Navigationslinien verschwindet und zeigt das Schwebebild. Aber was auch immer ich mache, die Linie ist immer noch auf einer der Seiten da.

Ein Bild meines Navigationsmenüs

nav-lnie.png: Ist nur das Zeilen-Hover.png das gesamte Mausover-Bild

Hat jemand eine Lösung oder eine Erklärung, wie das geht?

CSS sieht so aus:

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

Und html wie folgt:

<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

Es ist höchstwahrscheinlich auf den Randcode zurückzuführen, den Sie hier haben:

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

Da sich auf der rechten Seite eines 2PX -Randes auf jedem Menüpunkt befindet, wird der linke Rand nicht versteckt, wenn Sie über das nächste Element maust. Wenn der Rand nicht wirklich benötigt wird, können Sie ihn entfernen und es sollte gut funktionieren, da genügend Platz vorhanden ist. Wenn es notwendig ist, können Sie auf dem Befehl schwebe, den Abstand auf dem Element ändern:

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

Natürlich ist es ein grober Hack, das Problem zu beheben. Der Abstand kann auch an beiden Enden eingestellt werden.