平行四边形菜单

Question

我在这里偶然发现了一个问题。我创建了一个菜单栏，其中包含几个带有列表和链接标签的可点击的平行四边形菜单项。

不幸的是，菜单栏现在出现了问题。每当我尝试悬停菜单项的重叠部分时，它将自动选择右下方的菜单项。例如，当我尝试单击HOME的尖头部分（与菜单项ABOUT重叠）时，将选择菜单项ABOUT。

我希望每个菜单项的所有区域都可以分别点击，而不会受到相邻菜单项的干扰。有什么帮助和建议吗？

http://i.stack.imgur.com/NDKNF.png   http://i.stack.imgur.com/gnhzt.png

这是HTML代码：

<ul class="header" id="navlist">
    <li id="home"><a href="#"></a></li>
    <li id="about"><a href="#"></a></li>
    <li id="benchmark"><a href="#"></a></li>
    <li id="service"><a href="#"></a></li>
    <li id="work"><a href="#"></a></li>
    <li id="client"><a href="#"></a></li>
    <li id="contact"><a href="#"></a></li>
</ul>

这里是CSS：

#navlist {
    position:relative;
}

#navlist li {
    margin:0;padding:0;list-style:none;position:absolute;top:0;
}

#navlist li,
#navlist a {
    height:31px;display:block;
}

#home {
    left:0px;
    width:112px;
    background:URL('../headbar/navmap.png') 0px 0px;
}

#home a:hover {
    background:URL('../headbar/navmap.png') 0px -31px;
}

和另一个菜单项（例如about，client和其他）遵循与home相同的规则。