I've recently started doing work on a personal website and early developed the idea to use a somewhat different menu than usual (CSS-wise).

Simple idea. Horizontal navigation with links. Hovering over the links would reveal a description of the link below the navigation -- something like websites used to have with 400 lines of Javascript code

It works, only to make it work I had to use potentially non-semantically correct HTML. Here's the end (heavily simplified) result of the HTML:

        <a href="/">Weblog<span id="weblog"> <del class="none">-</del> The home of another place full of nothing.</span></a>
Quick explanation on the HTML. The weblog Id for the span is needed for a design thing, so I can specify fixed widths. I enclose the description in spans so descendant selectors can be used to position the description, without affecting the link.

I've been having a couple of questions I can't seem to find a definite answer on, so I'd love to hear your opinion on this.

First, why an unordered list? It is a list of items, so an unordered list would be valid. I started to wonder if a definition list wouldn't be more appropriate? Yes and no. Let's go for yes, it is more appropriate. It shows the relation between the description of the link and the link itself a lot better. Though, is the link really a definition? No, I tend to think it isn't. Even if it was, how would I get my idea to work with the HTML of a definition list? Descendant selectors can't be used and my mind can't come up with a 'pretty' solution to get it to work using a definition list on lesser capable browsers.

Second point is the del tag. You might think, why on earth? Let me explain, but you'll probably fall of your chair laughing before I finish In order to make the links still reasonably readable for screenreaders and search engines, I added a simple hyphen to distinguish the link 'header' from its 'description'. All fine and dandy, but I don't want to see it in my page. One needs to assign only a hiding class to it and still need to be somewhat semantically err .. correct (haha), so the del tag was the closest I could think of.

As you can read, I've gone pretty far (in my opinion) to get my idea to work. Perhaps I can work around the raised issues if I approach the problem from a completely different perspective, but I have yet to start looking for that perspective. I don't think the currently used HTML is a disgrace, but some semantics elitists possibly disagree with me on this.

I'd love to hear your opinion on semantics in this case and your overall opinion. How far are you willing to go into favouring looks over semantics?

PS: Yes, I am a great nitpicker