clickable div link, but with a list inside (that validates)

The goal is a squarish div that is clickable as a link, and which contains a list.

This validates:

<div class="game">
    <a href="link.html">
        <img src="image.png" />
        <span class="name">Name</span>
    </a>
</div>

and with the <a> set to display: block I get the fully-clickable div effect I want.

But this, for obvious reasons, does not validate (even though browsers all make it work):

<div class="game">
    <a href="link.html">
        <span class="name">Name</span>
        <ul>
            <li>Thing 1</li>
       开发者_开发技巧     <li>Thing 2</li>
            <li>Thing X</li>
        </ul>
    </a>
</div>

is there a way to have a list inside my div, have the entire div be one block link, and still validate?

It might not be valid HTML4, but it's definitely valid HTML5 - in HTML5, you're allowed to have <ul>s inside <a>s.

Put an onclick event on your div and do away with the anchor altogether:

<div class="game" onclick="location.href='link.html';" style="cursor: pointer;">
    <span class="name">Name</span>
    <ul>
        <li>Thing 1</li>
        <li>Thing 2</li>
        <li>Thing X</li>
    </ul>
</div>

Not very pretty but it should validate.

Edit: Also most browsers are fine with div:hover css so you should still be able to get your anchor style css.