Question

我的垂直菜单有问题。

我希望我的菜单看起来像这样（http://svinehytten.dk/test/），但是当您看到“link2”阻碍点击“link1”时。

我正在使用span来控制文本，但我对任何游戏都是开放的（我需要它完全验证为xhtml 1.0）

我尝试了不同的解决方法，甚至试图制作div并将它们转换成javascript链接，但无论我尝试什么解决方案，更大的文本都会妨碍其他人

任何人都有任何想法？是否可以“发回”或将较小的链接作为主链接？

Answer 1

要继续我的评论，我会使用这样的图片：

http://jsfiddle.net/lollero/dnH4C/1/

HTML：

<ul id="menu">
    <li><a href="#"><img src="http://dummyimage.com/100x40/000/fff"></a></li>
    <li><a href="#"><img src="http://dummyimage.com/100x40/000/fff"></a></li>
    <li><a href="#"><img src="http://dummyimage.com/200x40/000/fff"></a></li>
    <li><a href="#"><img src="http://dummyimage.com/50x40/000/fff"></a></li>
    <li><a href="#"><img src="http://dummyimage.com/50x40/000/fff"></a></li>
    <li><a href="#"><img src="http://dummyimage.com/50x40/000/fff"></a></li>
    <li><a href="#"><img src="http://dummyimage.com/50x40/000/fff"></a></li>
</ul>

CSS：

#menu {
    width: 200px;
}

#menu img {
    float: left;
}

Answer 2

您可以在span上更改堆栈级别。

试试这个

#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 */
}

移动文本链接更紧密地阻止一些链接

2 个答案: