0

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; 
}
1
  • try setting overflow:hidden on #navigation ul, or an explicit height on #navigation ul a
    – user578895
    Jan 31, 2012 at 19:36

1 Answer 1

2

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.

1
  • 1
    Thanks for the second set of eyes--that fixed it. Much appreciated!
    – brogrammer
    Jan 31, 2012 at 20:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.