Les liens à l'intérieur et à l'extérieur des éléments de la liste ne fonctionnent pas

Question

J'essaie de créer une liste non ordonnée, avec chaque élément li ayant sa propre image de fond (pas de texte, juste image), mais j'ai des problèmes (dans Firefox au moins, cela fonctionne dans Safari) obtenir le lien au travail. Dans Firefox, l'image change au survol, mais ne vous permet pas de cliquer. Comment puis-je le faire fonctionner dans Firefox? J'ai essayé l'étiquette A à l'intérieur et à l'extérieur de la balise li.

Voici le 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 

Et voici le 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

Le lien doit être à l'intérieur du <li>, pour commencer, comme <li> est un élément de niveau bloc alors qu'une <a> est en ligne. En outre, définir: hover sur des éléments autres que <a> - tout en étant pris en charge dans les goûts de FF, etc - est dans mon expérience un peu inégale à travailler correctement et ne fonctionne pas du tout dans les anciens IE.

Personnellement, si elle me était en train d'écrire le code HTML, il ressemblerait à quelque chose comme ceci:

<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> 

Et le CSS serait quelque chose comme ce qui suit:

#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

Vous devez mettre la balise dans la balise li. Et puis définissez le tag à afficher: block; Cela provoquera le tag a pour remplir tout l'espace à l'intérieur de la balise li et rendre la zone entière cliquable.

Par exemple:

<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>