title: How to make a <ul> always stick to the top of the browser page?
body: <p>I have a <code>&lt;ul&gt;</code> at the top of the page showing navigation items. Currently its positioned via position:absolute to stick in place. Code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>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:</p>
  
  <p><a href="http://www.google.com/intl/en/enterprise/apps/business/products.html#drive" rel="nofollow">http://www.google.com/intl/en/enterprise/apps/business/products.html#drive</a></p>
  
  <p>How can this be done?</p>