1

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

不幸的是，菜单栏现在出现了问题。每当我尝试悬停菜单项的重叠部分时，它会自动选择下一个右侧的菜单项。例如，当我尝试单击 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 相同的规则。

4

0 回答 0