Validation error while putting <h> tag inside <a> tag(document type does not allow element "h2")

Question

when using this code:

<div class="menu">
            <ul id="mainnav">
                <li><h2><a href="dir1/" >AAAAA</a></h2>
                    <ul>
                        <li><a href="dir1/xxx.php"><h3>xxx</h3></a></li>
                        <li><a href="dir1/xxx2.php"><h3>xxx2</h3></a></li>
                        <li><a href="dir1/hxxx3.php"><h3>hxxx3</h3></a></li>
                    </ul>
                </li>

I get an error while validating saying that I should put <h2> outside of <a>. document type does not allow element <h2> When I do this validation passes without any problems but my styling breaks. Is there a way to keep both validation and styling? This is styling for menu and <h2>

.menu  li a{
        font: 100%  Helvetica, Arial, sans-serif;
        display:inline-block;
        color: #fff;
        }
    .menu li a:hover{
        color: #014661;
        background: url('../images/menu1.png') center left no-repeat;
    }        
        .menu li a h2{
            font-size: 92%;
            padding: 8px 18px;
            font-weight: bold;
            text-transform: uppercase;
        }
                .menu h3{
            font-size: 87%;
            font-weight: bold;
            text-transform: uppercase;
        }
        .menu li a h2:hover{
            background: url('../images/menu2.png') center right no-repeat;
        }      

Answer 1

With h2 outside a you need to change all occurrences in the stylesheet of a h2 to h2 a, so the order in the style sheet matches the order in the HTML, and styling will be applied.

Answer 2

While the approved answer might work, it is bad practice. The validation error is proof of the issue.

<a> is an inline element <h2> is a block element

Inline elements cannot be placed directly inside the body element; they must be wholly nested within block-level elements.

Inline elements should never contain contain block-level elements.