As usual, the navigation (this floating thing beside) is simply a couple of nested
<ul />s. The <a /> at the top level has its
href to the <ul /> of the lower level.
<ul id="nav">
<li style="float:right;"><a href="">-</a></li>
<li><a href="#m1">Menu 1</a>
<ul id="m1">
<li><a href="#s11">Submenu 1.1</a></li>
<li><a href="#s12">Submenu 1.2</a></li>
<li><a href="#s13">Submenu 1.3</a></li>
</ul></li>
<li><a href="#m2">Menu 2</a>
<ul id="m2">
<li><a href="#s21">Submenu 2.1</a></li>
<li><a href="#s22">Submenu 2.2</a></li>
<li><a href="#s23">Submenu 2.3</a></li>
</ul></li>
<li><a href="#m3">Menu 3</a>
<ul id="m3">
<li><a href="#s31">Submenu 3.1</a></li>
<li><a href="#s32">Submenu 3.2</a></li>
<li><a href="#s33">Submenu 3.3</a></li>
</ul></li>
</ul>
The submenus are hidden with display:none;. If they become target, they get
display:block; to pop up. The interesting part of the CSS:
#m1, #m2, #m3
{
display:none;
}
#m1:target, #m2:target, #m3:target
{
display:block;
}
Pseudoclass :target is new in CSS3. Failes in MS IE, Konqueror and Opera, renders fine with Gecko based and Safari.