css - 为什么左侧菜单中的最后 3 个 <a> 没有填充它们包含的 <li>？

Question

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

文本部分中的最后 3 个列表项仅当您的鼠标悬停在它们的最右侧时才显示为链接。那也是唯一触发 :hover 背景颜色变化的地方。前两个工作正常。 css 验证。 html 中有一堆验证错误，但没什么大不了的。

我想不通。

相关的 css 是 briligg.css 文档中的第 66 到 121 行，以及 html 文档的 head 部分的第 9 到 47 行。 html代码从第79行到第117行。

外部CSS:

.menutop, .menubottom, .menunow  {
        float: left;
        width: 120px;
        position: absolute;
    }
.menutop li, .menubottom li {
    list-style: none;
    position: absolute;
    left: 0;
    margin: 10px 14px 5px 14px;
    }
.menunow li {
    border-bottom: 5px solid #52473f;
    border-top: 10px solid #52473f;
    border-left: 14px solid #52473f;
    border-right: 14px solid #52473f;
    outline: #3b3b3b solid 1px;
    padding-bottom: 3px;
    list-style: none;
    position: absolute;
    left: 0;
    }
.menutop li, .menutop a, .menubottom li, .menubottom a {
    width: 120px;
        height: 120px;
        display: block;
    }
div.textmenu {
        float: left;
        width: 150px;
        margin: 30px 10px 0 10px;
        position: relative;
        }
ul.textmenu {
        position: absolute;
        left: 0;
        }
li.textmenu {
        background-color: #52473f;
        margin-bottom: 3px;
        padding: 5px 7px;
        border: 1px solid #3b3b3b;
        width: 134px;
        list-style: none;
        text-align: right;
        color: #fd8ee2;
        }
li.textmenu a {
        text-decoration: none;
        color: #fd8ee2;
        }
li.textmenu:hover {
        background-color: #3b3b3b;
        }

内部CSS:

.menutop {
    height: 120px;
    }
.menunow {
    height: 120px;
    top: 140px;
    }
#frailty {
    top: 0;
    }
#frailty {
    background: url(images/legdrugnav.png) 0 0;
    }
#toll {
    top: 0;
    }
#toll {
    background: url(images/legdrugnav.png) 0 -120px;
    }
#option {
    top: 135px;
    }
#option {
    background: url(images/legdrugnav.png) 0 -240px;
    }
#weighing {
    top: 270px;
    }
#weighing {
    background: url(images/legdrugnav.png) 0 -360px;
    }
ul.textmenu {
    top: 275px;
    }
.menubottom {
    height: 270px;
    position: absolute;
    top: 380px;
    }

html:

<div class="textmenu">
<ul class="menutop">
    <li class="menutop" id="frailty" title="Drug Use and Abuse">
        <a href="frailty.html"></a>
    </li>
</ul>
<ul class="menunow">
    <li class="menunow" id="toll">
        <a href="toll.html"></a>
    </li>
</ul>
<ul class="textmenu">
    <li class="textmenu">
        <a href="toll.html#organized-crime">Prohibition funds organized crime</a>
    </li>
    <li class="textmenu">
        <a href="toll.html#corruption">Prohibition causes corruption</a>
    </li>
    <li class="textmenu">
        <a href="toll.html#kills">Prohibition kills</a>
    </li>
    <li class="textmenu">
        <a href="toll.html#poverty">Prohibition means poverty</a>
    </li>
    <li class="textmenu">
        <a href="toll.html#waste">Prohibition means wasted resources</a>
    </li>
</ul>
<ul class="menubottom">
<li class="menubottom" id="option" title="the option">
<a href="option.html"></a>
</li>
<li id="weighing" title="the pros and cons">
<a href="weighing.html"></a>
</li>
</ul>
</div>

Answer 1

您有一个

类 menubottom 与您的导航重叠，因此防止底层 -Elements 接收鼠标悬停事件。

使用 Firefox + Firebug Addon，如果您使用元素选择器并移动到该链接上方，您很容易看到这一点(只有 3/4 的链接受到影响)