왜이 이미지 스프라이트 메뉴가 제대로 표시되지 않으며 링크가 작동하지 않는 이유는 무엇입니까?

Question

코드 유효성이 검사됩니다. 사일로의 눈에 보이는 것 위 왼쪽의 메뉴에 두 개의 이미지가 더 있어야합니다. 그리고 각 링크가 있어야합니다.

http://www.briligg.com/agnosticism.html

CSS는 다음과 같습니다 외부 스타일 시트 :

.menu { 
position: relative; 
float: left; 
margin: 10px; 
padding: 0; 
width: 150px; 
} 
.menu li { 
margin: 0; 
padding: 0; 
list-style: none; 
position: absolute; 
left: 0; 
top: 260px; 
} 
.menu li, .menu a { 
width: 150px; 
height: 150px; 
} 

내부 스타일 시트 :

.menu { 
    height: 450px; 
} 
.mirror { 
    top: 0; 
} 
.mirror { 
    background: url(http://www.briligg.com/images/menu-ag.png) 0 0; 
} 
.wormcan { 
    top: 151px; 
} 
.wormcan { 
    background: url(http://www.briligg.com/images/menu-ag.png) 0 -151px; 
} 
.wormsilo { 
    top: 301px; 
} 
.wormsilo { 
    background: url(http://www.briligg.com/images/menu-ag.png) 0 -301px; 
} 

HTML : 내부 스타일 시트, Y에서

<ul class="menu"> 
    <li class="mirror"> 
     <a href="whoryou.html"></a> 
    </li> 
    <li class="wormcan"> 
     <a href="aroundyou.html"></a> 
    </li> 
    <li class="wormsilo"> 
     <a href="beyondyou.html"></a> 
    </li> 
</ul> 

Answer 1

흠 - 아마도 링크 (.menu a)를 display: block으로 설정하여 링크가 제대로 작동하도록해야합니다. 그렇지 않으면 링크가 지정된 크기를 사용하도록 늘리지 않으며, 링크가 인라인 요소입니다 (잘못된 경우 올바르지 만 테스트하지 않았습니다).

Answer 2

ou는 더 잘 지정해야합니다. .menu li이 매우 구체적이므로 .wormcan을 (를) 오버런합니다.

.menu li.wormcan을 내부 스타일 시트로 시도하십시오.

테스트하지 않았지만 빠른 모양으로 보니 문제가되는 것 같습니다.