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.