Wie würdet ihr es lösen?

[molily]

Wie Joachim sagt, das HTML einfach so:

<ul id="nav">
<li id="link1"><a href="...">Link 1</a></li>
<li id="link2"><a href="...">Link 2</a></li>
usw.
</ul>

Den Rest mit CSS nach Art von CSS Sprites (siehe auch). Also z.B. dem ul-Element ein großes Hintergrundbild geben und beim #link1 a:hover die Bildversion mit den »geöffneten Türchen« als Hintergrundbild zeigen.
Dazu muss das a-Element display:block, eine feste width und height haben sowie absolut positioniert sein - halt wie im Beispiel von CSS Sprites. Das ul-Element bekommt position:relative, damit sich die absolute Positionierung der a-Elemente auf dessen Box bezieht.

Mathias