Перемещение текстовых ссылок ближе друг к другу блокирует некоторые ссылки

Question

У меня проблема с моим вертикальным меню.

Я хочу, чтобы мое меню выглядело примерно так (http://svinehytten.dk/test/), но, как вы видите, "link2" мешает нажать "link1".

Яиспользуя span s для управления текстом, но я открыт для любых предложений (мне нужно, чтобы он был полностью проверен как xhtml 1.0)

Я пробовал разные способы обхода, даже пытался сделать divи превращайте их в ссылки с помощью javascript, но независимо от того, какое решение я пробую, более крупные текстовые фрагменты мешают другим.

У кого-нибудь есть идеи?Можно ли "отправить обратно" или сделать меньшую ссылку основной?

Answer 1

Вы можете изменить уровень стека на 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 */
}

Answer 2

Чтобы продолжить мой комментарий, я бы использовал изображения вроде этого:

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;
}