A clickable using an tag - no JS to be used. Is it legal HTML?

Question

Ok, I have read a lot of times that inline elements should never contain block elements. I agree, there are problems with that and it can get messy after. But I find it the

Answer 1

If you have a look at the stackoverflow menu you will see it is quite easy. You put a <a> inside a <li>, put it to display block and give it the padding you want to achieve the block feel.

Answer 2

A legal and clean way of accomplishing this is to use a style of inline-block for the A tags and let them fill the complete LI.

LI > A
{
    display: inline-block;
}

OR

LI > A
{
    display: block;
}

This will work in IE7+, and all recent versions of Firefox, Chrome, Safari, Opera, etc.

Note that in the current draft of HTML 5, it is legal to put a greater variety of elements inside an anchor tag than was previously allowed (see "permitted content" and examples): http://dev.w3.org/html5/markup/a.html

Additional article: http://html5doctor.com/block-level-links-in-html-5/