如果我要上边是20px而左边是300px

我初学Javascript菜单设置，下边的margin:20px设置菜单上边和左边都是20px，如果我要上边是20px而左边是300px，应该如何设置呢?------------
<!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 runat="server"> 
 <title>JavaScript下拉菜单</title> 
 <style type="text/css"> 
 * { 
 padding:0; 
 margin:0; 
 } 
 body { 
 font-family:verdana, sans-serif; 
 font-size:small; 
 } 
 #navigation, #navigation li ul { 
 list-style-type:none; 
 } 
 #navigation { 
 margin:20px; 
 } 
 #navigation li { 
 float:left; 
 text-align:center; 
 position:relative; 
 } 
 #navigation li a:link, #navigation li a:visited { 
 display:block; 
 text-decoration:none; 
 color:#000; 
 width:120px; 
 height:40px; 
 line-height:40px; 
 border:1px solid #fff; 
 border-width:1px 1px 0 0; 
 background:#c5dbf2; 
 padding-left:10px; 
 } 
 #navigation li a:hover { 
 color:#fff; 
 background:#2687eb; 
 } 
 #navigation li ul li a:hover { 
 color:#fff; 
 background:#6b839c; 
 } 
 #navigation li ul { 
 display:none; 
 position:absolute; 
 top:40px; 
 left:0; 
 margin-top:1px; 
 width:120px; 
 } 
 #navigation li ul li ul { 
 display:none; 
 position:absolute; 
 top:0px; 
 left:130px; 
 margin-top:0; 
 margin-left:1px; 
 width:120px; 
 } 
 </style> 
 <script type="text/javascript"> 
 function displaySubMenu(li) { 
 var subMenu = li.getElementsByTagName("ul")[0]; 
 subMenu.style.display = "block"; 
 } 
 function hideSubMenu(li) { 
 var subMenu = li.getElementsByTagName("ul")[0]; 
 subMenu.style.display = "none"; 
 } 
 </script> 
 </head> 
 <body> 
 <ul id="navigation"> 
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
 <a href="#">栏目1</a> 
 <ul> 
 <li><a href="#">栏目1->菜单1</a></li> 
 <li><a href="#">栏目1->菜单2</a></li> 
 <li><a href="#">栏目1->菜单3</a></li> 
 <li><a href="#">栏目1->菜单4</a></li> 
 </ul> 
 </li> 
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
 <a href="#">栏目2</a> 
 <ul> 
 <li><a href="#">栏目2->菜单1</a></li> 
 <li><a href="#">栏目2->菜单2</a></li> 
 <li><a href="#">栏目2->菜单3</a></li> 
 <li><a href="#">栏目2->菜单4</a></li> 
 <li><a href="#">栏目2->菜单5</a></li> 
 </ul> 
 </li> 
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
 <a href="#">栏目3</a> 
 <ul> 
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
 <a href="#">栏目3->菜单1</a> 
 <ul> 
 <li><a href="#">菜单1->子菜单1</a></li> 
 <li><a href="#">菜单1->子菜单2</a></li> 
 <li><a href="#">菜单1->子菜单3</a></li> 
 <li><a href="#">菜单1->子菜单4</a></li> 
 </ul> 
 </li> 
 <li><a href="#">栏目3->菜单2</a></li> 
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
 <a href="#">栏目3->菜单3</a> 
 <ul> 
 <li><a href="#">菜单3->子菜单1</a></li> 
 <li><a href="#">菜单3->子菜单2</a></li> 
 <li><a href="#">菜单3->子菜单3</a></li> 
 </ul> 
 </li> 
 </ul> 
 </li> 
 </ul> 
 </body> 
 </html>