html - CSS Sprite 导航菜单不会出现在任何浏览器中？

Question

我是 HTML 和 CSS 编码领域的新手，目前正在测试我在自己网站上学到的东西。

我创建了一个非常简单的导航菜单，我猜是使用 CSS sprite 编码，我使用的是 Visual Studios 2012，并且该程序中的所有内容都正确显示，但是当我尝试在任何浏览器(IE、Google、Firefox)中测试我的网页时我的导航菜单消失了。我注意到当我将鼠标悬停在导航菜单应该所在的空间上时，光标确实发生了变化，但是正如我所说，实际上没有显示任何菜单。

除此之外，我页面中的其他元素确实出现并且似乎正常运行？

这是我使用的 HTML 代码

  <div class ="navmenu">
    <ul class ="navbar">
     <li class ="Aboutus"><a href="#"></a></li>
     <li class="Projects"><a href="#"></a></li>
     <li class="Contactus"><a href="#"></a></li>
    </ul>
  </div>

然后是 CSS

.navmenu
{
  height: 120px;
  position: relative;
}

.navbar
{
  position: relative;
  top: 0px;
  left: 0px;
  height: 79px;
}

.navbar li
{
    list-style: none;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
}

.narbar li, .navbar a
{
    height: 60px;
    display: block;
}


.Aboutus
{
  left: 0px;
  width: 174px;
  background: url('c:\users\teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') 0px 0px;
}

.Projects
{
  left: 174px;
  width: 174px;
  background: url('c:\users\teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') -174px 0px;
}

.Contactus
{
  left: 348px;
  width: 174px;
  background: url('C:\Users\Teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') -348px 0px;
}

.Aboutus a:hover
{
 background: url('C:\Users\Teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') 0px -60px;
}

.Projects a:hover
{
  background: url('C:\Users\Teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') -174px -60px;
}

.Contactus a:hover
{
  background: url('C:\Users\Teila\documents\visual studio 2012\Projects\Concept2\Concept2\Img\navMenu2.PNG') -348px -60px;
}

我已经尝试寻找几天的问题可能是什么，希望有人能帮助我。将不胜感激。

Answer 1

这可能是因为你有一个图像的绝对路径 c:/等。如果你使用相对路径 sp 可能是 img/或/img/或 ../img/使用 ../后退文件夹返回您需要从 css 文件访问您的图像文件夹。