Ссылки внутри и снаружи элементов списка не работают

Question

Я пытаюсь создать неупорядоченный список, у каждого элемента li есть свое фоновое изображение (без текста, просто изображение), но у меня возникают проблемы (по крайней мере, в Firefox, он работает в Safari), получая ссылку работать. В Firefox изображение меняется при наведении, но не позволяет нажимать. Как мне заставить его работать в Firefox? Я пробовал тег A внутри и снаружи тега li.

Вот 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> является встроенным.

Кроме того, установка: 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... **/

Answer 2

Вам нужно поместить тег внутри тега li. А затем установите тег для отображения: блок; Это приведет к тому, что тег заполнит все пространство внутри тега 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>