不会在鼠标上删除分隔线

Question

我一直在为我的网站设计菜单。我遇到了转换为HTML/CSS的问题。这个想法是在文本的每一侧和导航线上的鼠标上都有一个分隔线，并显示悬停图像。但是无论我做什么，这条侧面仍然存在。

我的导航菜单的图像

nav-lnie.png：只是线路悬停。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;
}

当然，解决问题是一个粗略的技巧。间距也可以在两端进行调整。