Nested hyperlinked areas without nested link elements in HTML source

Question

I'd like to have something that looks and behaves as hyperlink inside larger rectangle (full page wide) which is also hyperlink. Below there is ASCII-art representation of what it should look like:

|-------------------------------------------|
| Some text  [_link_]                            |
|-------------------------------------------|

The whole outer rectangle (block element) is to be hyperlink. Inside this rectangle there should be some text, and at the end of this text there should be another link.

Unfortunately nesting links (A elements) is illegal in (X)HTML:

12.2.2 Nested links are illegal

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

(from http://www.w3.org/TR/html401/struct/links.html#h-12.2.2), so the most natural way of implementing above

<a href="xxx" style="display: block">
  Some text
  <a href="yyy">link</a>
</a>

is not valid HTML. What is even worse is that some web browsers in some cases enforce this requirement by moving inner link element just outside closing element of outer link element. This of course utterly breaks layout.

So what I'd like to ask is how to arrive at layout presented above using HTML and CSS (but no JavaScript), but without nested link elements in HTML source. It would be nice if behaviour was as close as possible to the one with nested link elements (for browsers which are not overly strict in implementing HTML standard).

---

Edit (16-01-2009)

Clarification: Solutions which use more than two link elements are perfectly acceptable

<a href="xxx" ...>Some text</a>
<a href="yyy" ...>Link</a>
<a href="xxx" ...>& nbsp;</a>
...

Answer 1

You could try something like this:

div.a {
  position: relative;
  background-color: #F88;
  z-index: 0;
}
a.b {
  position: relative;
  z-index: 2;
}
a.b:hover {
  background-color: #8F8;
}
a.c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
a.c:hover {
  background-color: #88F;
}
a.c span {
  display: none;
}

<div class="a">
  foo
  <a href="bar" class="b">bar</a>
  <a href="foo" class="c"><span>baz</span></a>
</div>