为什么顶部和左边总是有有一段高度大约为10px和宽度5px的空白

在下面这个版面设计中，为什么顶部和左边总是有有一段高度大约为10px和宽度5px的空白?如何消除？
-----------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>javaScriptDropDownMenu</title>
  <style type="text/CSS">
  body {  font-family:verdana, sans-serif;  font-size:small;  }
  #navigation, #navigation li ul {  list-style-type:none;  }
  #navigation {
  padding:0px;
  margin:0px;
}
  #navigation li {text-align:center;  position:relative;}
  #navigation li a:link, #navigation li a:visited {
  display:block;  text-decoration:none;  color:#000;
  width:80px;  height:30px;  line-height:30px;
  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:0px;
right:130px;
margin-left:1px;
width:80px;
  }
  #navigation li ul li ul {
  display:none;
  position:absolute;
  top:0px;
  left:0;
  margin-top:0;
  margin-left:1px;
  width:80px;
  }  #canvas1 {
float: left;
margin: 0;
background:#CCFF00
}#buttons {
width:80px;
height:800px;
float: right;
margin: auto;
background:#CCFF00
}
  </style>
</head>
<body>
<p><canvas id="canvas1" width="800" height="800" ></canvas></p>
<div id="buttons">
 <ul id="navigation">
    <li style="width:120px" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
      <a href="#">Item1</a>
      <ul>
        <li><a href="#">Item1->Menu1</a></li>
        <li><a href="#">Item1->Menu2</a></li>
        <li><a href="#">Item1->Menu3</a></li>
        <li><a href="#">Item1->Menu4</a></li>
      </ul>
    </li>
    <li style="width:120px" id="tb0" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
      <a href="#">Item2</a>
      <ul>
        <li><a href="#">Item2->Menu1</a></li>
        <li><a href="#">Item2->Menu2</a></li>
        <li><a href="#">Item2->Menu3</a></li>
        <li><a href="#">Item2->Menu4</a></li>
        <li><a href="#">Item2->Menu5</a></li>
      </ul>
    </li>
  </ul></div><script id="script1" 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";
  }var draw_canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var process_draw = new Processing(draw_canvas, sketchProc);
process_draw.noLoop();
process_draw.size(800, 800);
draw_canvas.addEventListener('click', user_click_mouse, false);
//draw_canvas.addEventListener('mousemove', mouse_is_moving, false);
// p.exit(); to detach it
</script>
</body>