Why doesn't this image sprite menu display properly, and why aren't the links working?

The code validates. There should be two more images in the menu on the left, above the visible one of the silo. And each should be a link.

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

css is: external style sheet:

.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;
}

internal style sheet:

.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;
开发者_StackOverflow中文版}
.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>

In your internal stylesheet, you have to specify better. Because .menu li is very specified, it overruns .wormcan.

Try .menu li.wormcan in the internal stylesheet.

Haven't tested this, but from a quick look, this seems to be the problem.

Hum - maybe you should try setting the links (.menu a) to display: block to have the links working properly. Otherwise the link won't stretch to use the specified size, links are inline elements (correct me if I'm wrong, didn't test it).