为什么我的菜单看不见文字，文字都跑到下面去了

为什么我的菜单看不见文字，文字都跑到下面去了，请问是什么原因？下面是我的代码。<!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;
left:50px;
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;
  }
#buttons {
width:80px;
height:800px;
float: left;
margin: auto;
background:#C0C0C0
}#canvas1 {
float: left;
margin: 0;
background:#C0C0C0
}
  </style>
</head>
<body>
<div id="buttons">
<p><canvas id="canvas1" width="800" height="600" top= "0"></canvas></p>
 <ul id="navigation">
    <li style="width:120px" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
      <a href="#">Point</a>
      <ul>
        <li><a href="javascript:void(0)" onclick="draw_point()">pt</a></li>
        <li><a href="#">vector</a></li>
      </ul>
    </li>
    <li style="width:120px" id="tb0" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
      <a href="javascript:void(0)" onclick="draw_line()">Line</a>
    </li>     <li style="width:120px" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
      <a href="#">Circle</a>
      <ul>
<li><a href="javascript:void(0)" onclick="draw_circle_center_and_pt()">center&pt</a></li>
<li><a href="javascript:void(0)" onclick="draw_circle_center_and_r()">center&r</a></li>
<li><a href="javascript:void(0)" onclick="draw_2P_circle()">2pt</a></li>
<li><a href="javascript:void(0)" onclick="draw_3P_circle()">3pt</a></li>
<li><a href="javascript:void(0)" onclick="draw_TTT_circle()">TTT</a></li>
</ul>
</li><li style="width:120px" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">Bisector</a>
<ul>
<li><a href="javascript:void(0)" onclick="bisector_angle()">angle</a></li>
<li><a href="javascript:void(0)" onclick="bisector_line()">line</a></li>
</ul>
</li><li style="width:120px" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="javascript:void(0)" onclick="delete_entity()">delete</a>
</li>
<li style="width:120px" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="javascript:void(0)" onclick="draw_perpendicular_line()">Perpen</a>
</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");
</script>
</body>