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 Chrome, Firefox, Internet Explore, or Opera, the menu should remain in a fixed position as you scroll this page. The positioning doesn't work in some older browsers.

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: