How to make a <ul> always stick to the top of the browser page?

Question

I have a <ul> at the top of the page showing navigation items. Currently its positioned via position:absolute to stick in place. Code:

#navigation
{
    text-align: center; 
    position: absolute; 
    float: left;    
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#navigation li
{
    display: inline-block; 
    width: 150px;
    height: 110px;
    cursor: pointer;
}

What I want to do, is to have this navigation bar remain glued to the top of the screen, and not be affected by the user's scrolling underneath the page. Kind of like this page:

http://www.google.com/intl/en/enterprise/apps/business/products.html#drive

How can this be done?

Answer 1

Set the position to "fixed"

#navigation {
    text-align: center; 
    position: fixed; 
    top: 0;
    left: 0;
    float: left;    
    margin: 0;
    padding: 0;
    list-style-type: none; }

Answer 2

use top and left property:

#navigation
{
    text-align: center; 
    position: absolute; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
}

You also could try to set the fixed position and set the z-index with a value greater than the other elements. The divs inside this #navigation have to be position: relative to get the same behaviour.