html - 平行四辺形メニュー

Question

ここで問題に遭遇しました。list タグと link タグを使用して、クリック可能ないくつかの平行四辺形のメニュー項目で構成されるメニューバーを作成しました。

残念ながら、現在メニューバーに問題が発生しています。メニュー項目の重複部分にカーソルを合わせようとすると、次の右側のメニュー項目が自動的に選択されます。たとえば、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 と同じ規則に従います。