A Floating CSS Menu

There is a menu in the upper right corner of this page. If you're viewing this page with a recent version of Firefox or Opera, the menu should remain in a fixed position as you scroll this page. Unfortunately, the positioning doesn't work in the current version of Internet Explorer (6.x) and the menu will scroll with the rest of the page instead of remaining "pinned" in the upper right corner. The positioning does work in IE 7.0, Beta 2.

This menu is from the W3C CSS Tips & Tricks site. If you want to try creating a menu like this, here is the code for your style sheet:

div.banner {
margin: 0;
font-size: 80% /*smaller*/;
font-weight: bold;
line-height: 1.1;
text-align: center;
position: absolute;
top: 2em;
left: auto;
width: 8.5em;
right: 2em;
}

body>div.banner {position: fixed}

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 }

And here is the code that goes on the HTML page: