CSS 스프라이트가 그 아래에 원하지 않는 중복 이미지를 생성합니다

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 링크 앞에 닫기 태그를 추가하여 두 개의 앵커가 표시되게합니다.