Links within and outside List elements not working

Question

I'm trying to create a unordered list, with each li element having it's own background image (no text, just image), but I'm having trouble (in Firefox at least, it works in Safari) getting the link to work. In Firefox, the image changes on hover, but doesn't let you click. How do I get it to work in Firefox? I've tried the A tag within and outside the li tag.

Here's the 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

And here's the 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

You need to put the a tag inside the li tag. And then set the a tag to display: block; This will cause the a tag to fill up all the space inside the li tag and make the whole area clickable.

For example:

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

Answer 2

The link needs to be inside the <li>, for a start, as a <li> is a block-level element whereas an <a> is inline.

Also, setting :hover on elements other than <a> - while supported in the likes of FF, etc - is in my experience a bit spotty at working right and doesn't work at all in older IEs.

Personally, if it were me writing the HTML, it would look something like this:

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

And the CSS would be something like the following:

#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... **/