html - 列表元素内外的链接不起作用

Question

我正在尝试创建一个无序列表，每个 li 元素都有自己的背景图像(没有文本，只有图像)，但我在获取链接时遇到了问题(至少在 Firefox 中，它在 Safari 中有效)上类。在 Firefox 中，图像会在悬停时发生变化，但不会让您点击。我如何让它在 Firefox 中工作？ li标签内外的A标签我都试过了。

这是 CSS...

#menu   {
   width:107px;
   height:200px;
}

#menu-1, #menu-1-active, #menu-2, #menu-2-active, #menu-3, #menu-3-active, #menu-4, #menu-4-active, #menu-5, #menu-5-active, #menu-6, #menu-6-active    {
   width:107px;
   height:29px;
   padding-bottom:5px;
   background-repeat: no-repeat;
   display:block;
   text-indent: -999px;

}

#menu-1   {
   background-image: url(menu1.png);
}
#menu-1:hover   {
   background-image: url(menu1on.png);
}
#menu-1-active   {
   background-image: url(menu1on.png);
}


#menu-2   {
   background-image: url(menu2.png);
}
#menu-2:hover   {
   background-image: url(menu2on.png);
}
#menu-2-active   {
   background-image: url(menu2on.png);
}

etc

这是 HTML...

<div id="menu">
<ul>

<a href="1"><li id="menu-1-active">
One
</li></a>
<a href="2"><li id="menu-2">
Two
</li></a>
<a href="3"><li id="menu-3">
Three
</li></a>
<a href="4"><li id="menu-4">
Four
</li></a>
<a href="5"><li id="menu-5">
Five
</li></a>
<a href="6"><li id="menu-6">
Six
</li></a>

</ul>
</div>

Answer 1

链接需要在 <li> 内, 首先，作为 <li>是 block 级元素，而 <a>是内联的。

此外，设置 :hover 在 <a> 以外的元素上- 虽然支持 FF 等 - 根据我的经验，在正确工作方面有点参差不齐，并且在旧的 IE 中根本不起作用。

就我个人而言，如果是我编写 HTML，它看起来应该是这样的:

<ul id="menu">
    <li id="menu-1-active"><a href="1">One</a></li>
    <li id="menu-2"><a href="2">Two</a></li>
    <li id="menu-3"><a href="3">Three</a></li>
    <li id="menu-4"><a href="4">Four</a></li>
    <li id="menu-5"><a href="5">Five</a></li>
    <li id="menu-6"><a href="6">Six</a></li>
</ul>

CSS 将类似于以下内容:

#menu{
    width:107px;
 height:200px;
}
#menu li{
    padding: 0, 0, 5px;
}
#menu li a{
    display: block;
    text-indent: -999px;
    height: 29px;
    background: transparent, none, center, center, no-repeat;
}

#menu-1 a:link, #menu-1 a:visited { background-image: url(menu1.png); }
#menu-1 a:hover, #menu-1 a:active, #menu-1-active { background-image: url(menu1on.png); }

/** Continue on with your other links here... **/