Css 将文本链接移近会阻止某些链接

我的垂直菜单有问题

我希望我的菜单看起来像这样（），但正如您所看到的那样，“link2”妨碍了单击“link1”

我使用

span

s来控制文本，但我对任何建议都持开放态度（我需要它作为XHTML1.0进行完美验证）

我尝试了不同的解决方法，甚至尝试制作

div

s并将它们转换为javascript链接，但无论我尝试什么解决方案，较大的文本块都会妨碍其他文本块

---

有人有什么想法吗？是否可以“发送回”或将较小的链接作为主要链接？

要继续我的评论，我会使用以下图像：

HTML:

---

您可以在

span

s上更改堆栈级别

试试这个

#link1 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 27px;
    line-height: 40pt;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    position: relative; /* ADD THIS */
    z-index: 1000;      /* ADD THIS */
}

---

我会使用图像而不是文本来避免任何奇怪之处。z索引使它更好，但不能完全修复它。虽然有很多小的调整，它可能会工作。我可能最终会使用一些图像的滚动效果。虽然我想保留文本菜单

#menu {
    width: 200px;
}

#menu img {
    float: left;
}

#link1 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 27px;
    line-height: 40pt;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    position: relative; /* ADD THIS */
    z-index: 1000;      /* ADD THIS */
}