CSS - Floating Sub Menu

I saw this appealing menu from a css contest page and i've studied the code over and over again but i can't seem to get the same effect as this person has done. He has created a menu that just floats while the screen is able to scroll up and down.
the site is :
http://contest.prestontalk.com/index/FluidFixed/0/4/1/

if anyone knows how this effect is done, let me know.
thanks!

Hi All,

I have a site

PHP Code:
 hopevalleycamp.com 





which features a three box floating menu over a single background image.

The menu "works" in Firefox and Safari, but not in IE8. I'm not sure if there is a"fix" I can apply for IE or not.

The code for the menu css can be viewed here...
PHP Code:
* {
    font-family: Arial,Helvetica,sans-serif;
}
.yuimenubar {
    position: static;
    visibility: visible;
}
.yuimenu .yuimenu, .yuimenubar .yuimenu {
    left: -10000px;
    position: absolute;
    top: -10000px;
    visibility: hidden;
}
.yui-menu-shadow {
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
.yuimenubar ul, .yuimenu ul {
    list-style-type: none;
}
.yuimenubar ul, .yuimenu ul, .yuimenubar li, .yuimenu li, .yuimenu h6, .yuimenubar h6 {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#productsandservices {
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 0;
    position: relative;
    z-index: 1;
}
.yuimenuitemlabel, .yuimenubaritemlabel {
    white-space: nowrap;
}
.hide-scrollbars * {
    overflow-x: hidden;
    overflow-y: hidden;
}
.hide-scrollbars select {
    display: none;
}
.yuimenu.show-scrollbars {
    overflow-x: visible;
    overflow-y: visible;
}
.yui-skin-sam .yuimenubar > .bd > ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.yui-skin-sam .yuimenubaritem {
    float: left;
}
.yui-skin-sam .yuimenubarnav .yuimenubaritem {
    line-height: 1.42em;
    margin-right: 11px;
}
.yui-skin-sam .yuimenubaritemlabel {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #FFFFFF;
    display: block;
    line-height: 1.42em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.yui-skin-sam .yuimenubaritemlabel-selected, .yui-skin-sam .yuimenubaritem a.active, .yui-skin-sam .yuimenubaritem-hassubmenu-selected {
    color: #FFFFFF;
}
.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel {
    font-size: 34px !important;
    font-weight: bold;
    line-height: 1.42em;
}
.yui-skin-sam .yuimenu .bd {
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    top: 0;
    width: 151px;
}
.yui-skin-sam .yuimenu ul {
    padding-bottom: 10px;
    padding-left: 19px;
    padding-right: 19px;
    padding-top: 10px;
}
.yui-skin-sam li.first-of-type a.active, .yui-skin-sam li.first-of-type a.yuimenubaritemlabel-selected {
}
.yui-skin-sam .yuimenuitemlabel {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    padding-left: 12px;
    text-decoration: none;
    text-transform: uppercase;
}
.yui-skin-sam .yuimenuitemlabel-selected, .yui-skin-sam .bd .yuimenuitem a.active {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/drop-hover.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    color: #AF4B3E;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
}
#yui-gen0 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    width: 210px;
}
#yui-gen0 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen0 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen0 .yuimenuitemlabel-selected, #yui-gen0 .bd .yuimenuitem a.active {
    color: #95D4B5;
}
#yui-gen1 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li2.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    width: 210px;
}
#yui-gen1 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen1 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li2-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen1 .yuimenuitemlabel-selected, #yui-gen1 .bd .yuimenuitem a.active {
    color: #F7C609;
}
#yui-gen2 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li3.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-right: 0;
    width: 210px;
}
#yui-gen2 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen2 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li3-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen2 .yuimenuitemlabel-selected, #yui-gen2 .bd .yuimenuitem a.active {
    color: #C01349;
}
.first-of-type a, .first-of-type li a.active, a.yuimenubaritemlabel {
    color: #FFFFFF;
    font-size: 34px;
    text-transform: uppercase;
} 





All help appreciated in advance!

I want to create a menu that will float on the side of my page and stay in the same position on the screen as the user scrolls down. Is this done with CSS, Javascipt, or a little bit of both?
thanks.

I have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling.
Make sense?

See the image at http://i187.photobucket.com/albums/x205/vitainf/IEhelp.png
- having trouble to get it showing the image with the bbcodes :S

As you can see the menu to the right, which is known as '.sidebar' in the css followed below, is sort of pushing the main content, which is known as .content in the css below, down.

Anyone has any idea how to fix this?

Style Sheets
Code:

body
{
text-align: center;
  background: #800000;
  color: #fff;
}
* {
  padding: 0;
  margin: 0;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: left;
}

#spacer {
  height: 50px;
}

#header {
  height: 100px;
  width: 100%;
  background: url(ctfiles/logo.png) no-repeat top center #000;
}

#container {
  background: #fff;
  padding: 10px;
}

#main {
  background: #000;
  color: #fff;
  width: 700px;
}

.sidebar {
  float: right;
  text-align: right;
  background: #000;
  color: #fff;
  width: 30%;
  padding-left: 8px
  padding-right: 12px
}

.content { 
  color: #fff;
  background: #000;
  width: 70%;
  margin-left: 2px;
  margin-right: 2px
}

HTML/Template/PHP w/e
Note: It's a template for the MODx CMS, which explains some of the calls like [(site_name)]. The lorum ipsum is in the [*content*] call, the menu in the [[wayfinder...]] one.
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>[(site_name)] | [*pagetitle*]</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link rel="stylesheet" href="[(base_url)]chinatown.css" type="text/css" media="screen" />
        <base href="[(site_url)]" />

<!--[if lte IE 6]>

  <style type="text/css" media="screen, tv, projection">
        body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */
        #content { margin-left: 22px; } /* to avoid the BMH */
        a,  a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */
  </style>

  <script type="text/javascript" src="assets/js/sleight.js"></script>

<![endif]-->

        </head>
<body>

<div id="page">

<div id="spacer">
</div>

<div id="container">

<div id="header">
</div>

<div id="main">
<div class="sidebar">
 [[Wayfinder? &startId=`0`]]
</div>
<div class="content">
            <h4>[*longtitle*]</h4>
                [*#content*]
</div>
</div>

<div id="footer">
        [(site_name)] is powered by
        <a href="http://modxcms.com/" title="Powered by MODx"><strong>MOD</strong>x Content Management System</a>
        <br /><a href="[~11~]" title="Link to our Blog RSS Feeds">Blog Entries (RSS)</a><br />
MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^].
</div>

</div>
</div>

</body>
</html>