Question

I currently have the following code:

<ul id="menu-list">
    <a href="index.php"> <li>Home</li> </a>
    <li><a href="about.php">About</a></li>
</ul>

The first element in the list allows the entire li block to be clicked as a link but does not follow xhtml standards. The second follows standards but only the text in the li is a link. Is there a standards compliant way of getting the first functionality?

Answer 1

If you define css for the anchor to make it inline-block you can give it 100% width and height of the li and get the functionality you are looking for.

<style>
#menu-list li a
{
   display:inline-block;
   height: 100%;
   width: 100%;
}
</style>
<ul id="menu-list">
    <li><a href="about.php">About</a></li>
</ul>