マウス上の分割線を取り外しません

Question

私は自分のウェブサイトのメニューを設計しています。私はHTML/CSSに変換することに問題に達しました。アイデアは、テキストの両側に分割線を用意し、ナビゲーションラインの上のマウスには、ホバーイメージを表示することです。しかし、私が何をするにしても、ラインはまだ側面の1つにあります。

ナビゲーションメニューの画像

nav-lnie.png：hover.pngはマウスオーバー全体の画像だけです

誰かが解決策や説明を持っていますか？

CSSは次のようになります：

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

そして、このようなhtml：

<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

これはおそらくあなたがここに持っているマージンコードのためです：

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

各メニュー項目の右側に2pxのマージンがあるため、次の要素にマウスをマウスしても左マージンは隠されません。マージンが実際に必要でない場合は、十分なスペースがあるため、マージンを削除でき、正常に動作するはずです。必要に応じて、ホバーコマンドでは、要素の間隔を変更できます。

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

もちろん、問題を修正するのは大まかなハックです。間隔も両端で調整できます。