need help fixing header

I’m trying to fix my header so content scrolls under the header. my site is http://www.randomgoodness.ca. My css code is below, please help.

Josh

/* —– Header —– */
#header { width:1366px; height:161px; top:0px; left:0px; z-index:3000; background: url(images/header_01.png) fixed; }
#header #menu { float:left; width:600px; margin:0 0 0 0; }
#header #menu ul li { display:block; float:left; list-style:none; position:relative; }
#header #menu ul li a { color:#777; margin:0 0 0 0; font-size:20px; font-weight:normal; text-transform:lowercase; letter-spacing:-1px; }
#header #menu ul li a:hover, #header #menu ul li.current_page_item a { color:#222; text-decoration:none; }
#header #menu ul li ul { /* L1 */ display:none; background:#FFF; border:1px solid red; position:absolute; z-index:1000; top:20px; left:1px; }
#header #menu ul li:hover ul { display:block; width:130px; border-top:1px solid #CCC; border-left:1px solid #CCC; border-right:2px solid #CCC; border-bottom:2px solid #CCC; }
#header #menu ul li ul li { width:120px; padding:5px; margin:0; border-bottom:1px solid #CCC; background:#FFF; }
#header #menu ul li ul li a { display:block; font-size:12px; font-weight:bold; letter-spacing:0; margin:0; }
#header #menu ul li.current_page_item ul li a { color:#777; }
#header #menu ul li.current_page_item ul li a:hover { color:#222; }
#header #menu ul li:hover ul li ul { /* L2 */ display:none; position:absolute; top:0; left:130px; }
#header #menu ul li:hover ul li:hover ul { display:block; width:130px; border-top:1px solid #CCC; border-left:1px solid #CCC; border-right:2px solid #CCC; border-bottom:2px solid #CCC; }