Question

The navigation bar for my site–ncptw2012–is working, except when I hover the cursor just below the “about” button. This causes an unwanted duplicate image to suddenly appear beneath it.

Here is the navigation 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

You have bad markup, see:

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

The anchor tag isn’t closed. This is causing the browser to try and correct it and adds a closing tag before the about link, causing two anchors to be displayed.