How can I manage this nested markup and CSS to keep things simple and easy to work with?

Question

I have the following markup that is used to produce a pop-up style mega-menu (the .column div is there to allow multiple columns within each popup, though the example below only has a single column)...

<ul id="mainmenu">
    <li class="mega">
        <h2><a href="/">Menu 1</a></h2>
        <div class="submenu col1 leftmenu">
            <div class="column">
                <ul>
                    <li><h3>Sub Menu Heading</h3></li>
                    <li><a class="hilight" href="#">Do Something</a></li>    
                    <li><a class="hilight" href="#">More great stuff</a></li>
                    <li><a href="#">Another Item</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li class="mega">
        <h2><a href="#">Second Menu</a></h2>
        <div class="submenu col3 leftmenu">
               blar blar blar
        </div>
    </li>
    // more menus here    
</ul>

As this nests quite deeply with quite a few similar tags (<li> <a>) I end up needing a fairly horrible list of selectors to style it in css, eg.

#mainmenu li h2 a {}
#mainmenu li.mega .column li h3 a {}

Can anyone suggest any improvements to the markup so that it would be simpler to target with CSS and jQuery?

Answer 1

If it were me, I'd put nicely targetable classes on the final entities in question, and change

#mainmenu li h2 a {}

to

#mainmenu .section {}

and

#mainmenu li.mega .column li h3 a {}

to

#mainmenu .subsection {}

and whatnot.