Html 如何在背景链接图像上定位ul元素？

我想将元素放置在背景链接图像的黑色正方形上

在单词ABOUT和CONTACTS的右侧，我无法单击链接图像。 我需要能够点击背景链接图像以外的每一个地方 链接文本

以下是我尝试过的：

HTML:

---

这里有一种不必绝对定位每个链接的方法

从HTML开始：

<div class="weekend">
    <a href="/all">
         <img src="http://cdn.allfun.md/2014/01/23/10/52e0cd02e892f.jpg">
    </a>         
    <ul class="all">
        <li class="about"><a href="/about">About</a></li>
        <li class="contacts"><a href="/contacts">Contacts</a></li>
    </ul>
</div>

第一：设置位置：相对于。周末，这样ul。所有位置都是相对于 到其父块容器

对于ul.all，将边距和填充归零以重置任何不需要的空白，以及 然后设置“显示：内联块”以获得适合宽度的收缩

对于链接元素ul.all li，使用display:inline块，它将 如果需要，可以更好地控制填充和边距

现在的关键是将ul.all的宽度设置为一个较小的值，例如10px， 0也可以工作。这会收缩ul.all的边缘，使其不再延伸 超出li链接元素的边缘，因此您可以单击背景 元素位于包含链接文本的内联框边缘之外

本质上，ul.all li元素溢出到父元素的边缘之外 所有容器，这有点奇怪，但在这种情况下，正是需要的

请参见演示：

请注意，您可以将上/下页边距添加到ul.all li和生成的空白 还将允许您单击背景链接图像。在这种情况下，请确保

---

将宽度：0设置为ul.all，删除黄色边框仅用于演示。

不清楚您要做什么。你是说这个吗只需从ulNo中删除宽度值，再从单词ABOUT中删除左右。我无法单击黑色正方形。仍然不清楚您要做什么。因为您已设置宽度：290px；对于你的ul.all标签，我已经删除了演示中的宽度，这可能适合你-需要背景。所有内容都是透明的，并且可以单击链接

.all{
    position: absolute;
    width: 290px;
    top: 15px;
    left: 15px;

}

.about{
    display: block;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.contacts{
    display: block;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

<div class="weekend">
    <a href="/all">
         <img src="http://cdn.allfun.md/2014/01/23/10/52e0cd02e892f.jpg">
    </a>         
    <ul class="all">
        <li class="about"><a href="/about">About</a></li>
        <li class="contacts"><a href="/contacts">Contacts</a></li>
    </ul>
</div>