Question

我对HTML和CSS编码世界很陌生，目前正在测试我在自己的网站上学到的东西。

我创建了一个非常简单的导航菜单，我想使用CSS精灵编码，我正在使用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文件到达你的图像文件夹。

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

1 个答案: