Instead of this

<div class="sidenav">
<h2 class="sideheading">Site navigation></h2>
<ul class="sidelist">
<li class="sideitem">List item</li>
<li class="sideitem"><a href="#"><span class="sidelink">List item</span></a></li>
<li class="sideitem">List item</li>
</ul>
</div>

---

Do this instead

<div class="sidenav">
<h2>Site navigation</h2>
<ul>
<li>List item</li>
<li><a href="#">List item</a></li>
<li>List item</li>
</ul>
</div>

---

That way the CSS does all the work and the HTML is trivial.

div.sidenav { blah } /* styles overall div */
div.sidenav h2 { blah } /* styles h2 within the div */
div.sidenav ul { blah } /* styles ul within the div */
div.sidenav li { blah } /* styles li within the div */
div.sidenav li a { blah } /* styles a within li within the div */