Today I taught a graduate digital history class about CSS. I only had an hour, and there was no projector in the room, so I put together a tutorial to walk through how to take a list from normal looking list to navigation style list.
Here it is, in case you are interested. All the explanation is in the linked CSS file. Best to use something besides IE to view the CSS.
Since I used an HTML5 doctype, I experimented with the now legal application of the <a> tag around a block element. In this case, I have code that looks like this:
<a href="#"><li> ... </li></a>
The weird thing about this is that the only thing that has stopped us from using this technique is fear of the almighty validator. As it turns out, browsers quietly kept the functionality while HTML itself did not. Because of this, the functionality is spotty. In the above picture, you can see that the list items are underlined, even though I explicitly set text:decoration to none.
Still, this might be a fun technique to play with.