Html 删除li和li上的额外空间：悬停背景图像

我使用背景图像和悬停效果创建了一个导航栏。我正在努力学习如何在网站上正确地实现它们

我已经设计了90%的导航，但我遇到的问题是，当我将鼠标悬停在其中一个项目上时，悬停图像不会与原始图像重叠，并产生额外的空间

CSS:

#bg {
    background-color: #EAEAEA;
    width: 761px;
}
#menu {
    background-color: #EAEAEA;
    height: 58px;
    list-style-type: none;
    padding-left: 1px;
}
#menu li.first a {
    background: url("../images/top_nav_f.png") no-repeat scroll 0 0 transparent;
    height: 180px;
}
#menu li a {
    background: url("../images/top_nav_f.png") no-repeat scroll 0 0 transparent;
    float: left;
    width: 190px;
    height: 180px;
}
#menu li.first a:hover {
    background: url("../images/menu_hover_f.png") no-repeat scroll 0 0 transparent;
} 
#menu li a:hover {
    background: url("../images/menu_hover.png") no-repeat scroll right top transparent;
    color: #FFFFFF;
    height: 58px;
}
#menu li.last a {
    background: url("../images/top_nav_n.png") no-repeat scroll 0 0 transparent;
}
#menu li.last a:hover {
    background: url("../images/menu_hover_r.png") no-repeat scroll 0 0 transparent;
}
.bar {
    margin-right: 38px;
    padding-top: 5px;
    text-align: center;
}
.n1, .n2 {
    color: #333333;
}

  <nav id="bg">
            <ul id="menu">
           <li class="first">
            <a href="">
            <div class="bar">
              <div class="n2">Link 1 </div>
            </div>
           </a>

           </li>

            <li><a class="" href="">
            <div class="bar">
              <div class="n2">link 2 </div>
            </div>
             </a>
             </li>

            <li><a class="" href="">
            <div class="bar">
              <div class="n2">link 3 </div>
            </div>
            </a>
            </li>


             <li class="last"><a href="">
            <div class="bar">
              <div class="n2">link 4 </div>
            </div>
            </a>
            </li>
</ul>

</nav>

HTML:

#bg {
    background-color: #EAEAEA;
    width: 761px;
}
#menu {
    background-color: #EAEAEA;
    height: 58px;
    list-style-type: none;
    padding-left: 1px;
}
#menu li.first a {
    background: url("../images/top_nav_f.png") no-repeat scroll 0 0 transparent;
    height: 180px;
}
#menu li a {
    background: url("../images/top_nav_f.png") no-repeat scroll 0 0 transparent;
    float: left;
    width: 190px;
    height: 180px;
}
#menu li.first a:hover {
    background: url("../images/menu_hover_f.png") no-repeat scroll 0 0 transparent;
} 
#menu li a:hover {
    background: url("../images/menu_hover.png") no-repeat scroll right top transparent;
    color: #FFFFFF;
    height: 58px;
}
#menu li.last a {
    background: url("../images/top_nav_n.png") no-repeat scroll 0 0 transparent;
}
#menu li.last a:hover {
    background: url("../images/menu_hover_r.png") no-repeat scroll 0 0 transparent;
}
.bar {
    margin-right: 38px;
    padding-top: 5px;
    text-align: center;
}
.n1, .n2 {
    color: #333333;
}

  <nav id="bg">
            <ul id="menu">
           <li class="first">
            <a href="">
            <div class="bar">
              <div class="n2">Link 1 </div>
            </div>
           </a>

           </li>

            <li><a class="" href="">
            <div class="bar">
              <div class="n2">link 2 </div>
            </div>
             </a>
             </li>

            <li><a class="" href="">
            <div class="bar">
              <div class="n2">link 3 </div>
            </div>
            </a>
            </li>


             <li class="last"><a href="">
            <div class="bar">
              <div class="n2">link 4 </div>
            </div>
            </a>
            </li>
</ul>

</nav>

演示：

---

我已经试着让它工作了将近三天了

问题在于下面的

#菜单li a:hover

规则：

#menu li a:hover {
    background: url("../images/menu_hover.png") no-repeat scroll right top transparent;
    color: #FFFFFF;
    height: 58px;
}

您需要将背景规则更改为：

    background: url("../images/menu_hover.png") no-repeat scroll 0 0 transparent;

---

原因是，在背景的速记声明中，您已将背景位置设置为

右侧

和

顶部

，其中所有其他规则都设置为

0

和

0

。所以基本上你的背景是从右边而不是左边定位的，因为

a

的宽度是190px，图像的宽度是180px，所以看起来有10px的间隔。

谢谢你的建议。我照你说的做了，但我仍然看到差距。如果只是盒子的话就很容易了，但是如果这个箭头状的形状我无法让它工作。我认为是图像形状造成了问题。是否有其他方法来邻接图像以获得结果？