Question

我网站的导航栏 - ncptw2012 - 正在运行，除非我将光标悬停在“关于”按钮下方。这会导致不需要的重复图像突然出现在其下方。

这是导航CSS：

#navigation {
    width:960px;
    height:90px;
    margin:0 auto 0 auto;
    padding:0;
}   
#navigation ul {
  display:block;
  float:right;
  width:960px;
  height:90px;
  background:url(img/menu.jpg) no-repeat 0 0;
  list-style:none;
  padding:0;
}
#navigation ul li {
  display:block;
  float:left;  
  height:90px;
  text-indent:-10000px;
 }
#about {
  width:221px;
}
#call {
  width:203px;
}
#schedule {
  width:140px;
}
#explore {
  width:217px;
}
#register {
  width:179px;
}
#navigation ul li a {
  display:block;
  width:100%;
  height:100%;
}
#about a:hover {
  background:url(img/menu.jpg) no-repeat 0 -90px;
}
#call a:hover {
  background:url(img/menu.jpg) no-repeat -221px -90px;
}
#schedule a:hover {
  background:url(img/menu.jpg) no-repeat -424px -90px;
}
#explore a:hover {
  background:url(img/menu.jpg) no-repeat -564px -90px;
}
#register a:hover {
  background:url(img/menu.jpg) no-repeat -781px -90px; 
}

Answer 1

您的标记错误，请参阅：

<h2><a href="#">Chicago, Nov. 2 - 4, 2012, Doubletree Magnificent Mile, Colin Sato, Keynote Speaker</h2>

锚标记未关闭。这导致浏览器尝试更正它并在about链接之前添加一个结束标记，从而导致显示两个锚点。

CSS精灵在它下面创建一个不需要的重复图像

1 个答案: