html - 无法获得在 ul 上工作的链接，页面上的其他人工作正常

Question

我正在做一个学校元素，所以我仍在学习如何编码，但我在获取 ul 中的链接时遇到了问题。此页面上的导航和其他链接工作正常，但这个不起作用。任何帮助，将不胜感激。这是我的编码页面和示例的链接。 http://www.nesbittclan.com/beatrice/treatments.html

<div id="sidebar">
<ul>
<h1>Products</h1>
<li><a href="hair.html">Hair</a></li>
<li><a href="nails.html">Nails</a></li>
<li><a href="makeup.html">Makeup</a></li>
<li><a href="body.html">Body</a></li>
<h1>Treatments</h1>
<li><a href="massage.html">Massage</a></li>
<li><a href="nails.html">Nails</a></li>
<li><a href="makeup.html">Makeup</a></li>
<li><a href="laser.html">Laser Hair Removal/ Electrolysis</a></li>
<li><a href="facials.html">Facials</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="special.html">Special Events</a></li>
</ul>
</div>

Answer 1

首先移动h1在某处标记，它们不能是 UL 的直接子代元素。

但真正的问题不是a实际上是标签，但 <span> 的样式很奇怪在 #treatments h1 下 header 标签:

#treatments h1 span {
    background-repeat: no-repeat;
    background-image: url(../images/treatmenttitle.png);
    position: absolute;
    width: 100%;
    height: 100%;
}

自 h1静态定位，绝对定位 span 标签，覆盖页面的一部分，包括 a标签。

要解决此问题，您可以定位 span相对于 parent h1 :

#treatments h1 {
    position: relative;
}

或删除 span完全不确定您是否需要它。