hyperlinking a list item?

Question

i know this might seem straightforward, but i can't solve it, im trying to make the whole list item linkable, rather than just the word home

the html code:

<a href="#page1"><li class="current">Home</li></a>

p.s. when you hover the li, background color changes, so i want that whole list item to be hyperlinked, if you get what i mean, not just the word

Answer 1

Wrapping a block level element (the li) within an inline-element (a), is invalid mark-up, which has the potential to throw errors, depending on your doctype. That being the case, first change your mark-up around to:

<li><a href="#">link text</a></li>

Assuming that your li is display: block then the following will cause the a to 'fill' the available space:

a {
 display: block;
 width: 100%; /* this may, or may not, be necessary */
}

If you're using this for a horizontal list, and the li are display: inline, then you can use the following:

a {
  display: inline-block;
  }

And style-to-taste.

Answer 2

Do it in reverse

<li class="current"><a href="#page1">Home</a></li>

not sure what your other styles are but you can change the tag with something like

li.current a{
  display:block;
}

Answer 3

This should do it:

HTML:

<li class="current"><a href="#page1">Home</a></li>

CSS:

li a {
    display: block;
}

// or

li.current a {
    display: block;
}

​