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。

没有测试过这个，但从快速看，这似乎是问题。

Answer 2

哼 - 也许你应该尝试将链接（.menu a）设置为display: block以使链接正常工作。否则链接将不会延伸到使用指定的大小，链接是内联元素（如果我错了，请更正我，没有测试）。

为什么这个图像精灵菜单没有正确显示，为什么链接不起作用？

2 个答案: