列表元素内部和外部的链接不起作用

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>是块级元素，而<a>是内联元素。

此外，设置:在<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... **/

Answer 2

您需要将a标记放在li标记内。然后将a标记设置为display: block；这将导致a标记填满li标记内的所有空间，并使整个区域可单击。

例如：

<style type="text/css" media="screen">
    a {
        display: block;
    }
</style>

<ul>
    <li id="menu-1-active"><a href="1">One</a></li>
    <li id="menu-2-active"><a href="3">One</a></li>
</ul>