A pinned-down menu

The menu you see in the top right corner of this page is simply a DIV with some A elements inside. All the work to make it stay fixed in its place is done by rules in the style sheet. Here is the mark-up, it is taken straight from the source of this page:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

In a browser without CSS, or with CSS turned off, it will just be a normal paragraph with links. But thanks to the rules below, it will appear to "float" on top of the page, pinned to the upper right of the browser window:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

The interesting rules here are the 'position: fixed', that makes the DIV stay fixed on the screen, and the 'display: block', that makes the A elements inside the DIV into block elements, and thus displayed below each other, rather than all on one line.

Be careful with the order of the last three rules. They all have the same specificity, so the last one that applies determines the color. If the mouse hovers over the link, we want :hover to apply, so it has to be last.

The rest, the margins, borders, colors, etc. can be removed or changed according to personal taste. Note, however, how we did the rules between the links: there are borders above all links, except the first, thanks to the rule with ':first-child'. A pair of rules like this (border-top on all elements plus a border 'none' on the first child) is very convenient for creating borders between elements.

(If you look at the actual style sheets that are linked from this page, banner-o.css and banner.css, you will see some additional rules that appear to contradict each other. Those are there to protect against bugs in a few older browsers. In particular, in banner-o.css, the banner is hidden and in banner.css it is displayed as a block. This has the effect of hiding the banner from Netscape 4, because it skips the @import of banner.css.)