Navigation menu variants for the Dragora website

V1: The original idea – but with sub-pages

This looks pretty good. However, there is, to the best of my knowledge, no way this can be done with valid HTML for lists (and we should use lists for the navigation menu).

The reason is simple: Having sub-pages show in the navigation menu will need nested lists, or sub-lists. But you cannot simply put another list inbetween other items of an HTML list. Instead, a sub-list must be encapsulated by the list item it belongs to, which is perfectly reasonable.

Here's an example to show what this really means:

<!-- Invalid -->

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <ul>
    <li>Sub-item 1</li>
  </ul>
  <li>Item 3</li>
</ul>

<!-- Valid -->

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Sub-item 1</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Trying to style only the a element inside the list items is futile because a is an inline element and thus cannot be styled the same way as a block-level element. It cannot have a fixed width, for example. I've tried it anyway and it looked as expected: terrible.

V2: A variant of V1 using valid markup

Now, this is using the valid code variant from the examples in V1. So, sub-items are encapsulated. But as the style of navigation menu items depends on styling list items' (li) background, the encapsulation in the markup is also visible in the rendered result.

I didn't like this approach at first. But it's not bad, actually, especially in regard to the two other possibilities. The problem only is that it might look a bit weird when there is only one sub-page for an item, which would be the case for “Get Dragora -> Mirrors”, for example.

V3: A simpler but arguably less appealing approach

This approach does away with styling individual list items at the block level and puts the background and border only on the outer list instead.

This is probably the most “correct” way of showing a navigation menu, but I don't find it very appealing. To be fair, the example in the pictrue here was just hacked together quickly for proof of concept and could be made more visually appealing by, e.g., increasing padding on the left, using bullets or similar things for (sub-)items, and, maybe, appending a slash to main items that have sub-pages (e.g., “Testbed/”). This would then look quite simlar to the menu on cat-v.org (which is a Nietzschean site, i.e., beyond good and evil…).