html - 为什么这个图像 sprite 菜单不能正确显示，为什么链接不起作用？

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:

<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 li 非常具体，所以它超出了 .wormcan。

在内部样式表中尝试 .menu li.wormcan。

尚未对此进行测试，但快速浏览一下，这似乎是问题所在。