设定Li高度的问题


<!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>scrollTest</title>
<style type="text/css">
.div {
border-right: #00ffff 1px solid;
border-top: #00ffff 1px solid;
border-left: #00ffff 1px solid;
border-bottom: #00ffff 1px solid;
}
 <!--
  
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid #ccc;
   font: normal 12px verdana;
  }
  
ul li ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #ccc;
  }
  
ul li {
  position: relative;
  float:left;
  width: 80px;
  text-align:center;
  }
  
ul li ul li {
  position: relative;
  float:inherit;
  }
  
li ul {
  position: absolute ;
  left: 0px; 
  top: 24px;
  display: none;  }
/* Styles for Menu Items */
li a:hover{
    background: #146C9C;
    color: #fff;
  }ul li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc; /* IE6 Bug */
  border-right:0;
  height:12px;
  }
  
ul li ul li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc; /* IE6 Bug */
  border-bottom:0;
  border-right:0;
  }
  
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style><script type="text/javascript" language="javascript">    // JavaScript Document
    startList = function () {
        if (document.all && document.getElementById) {
            navRoot = document.getElementById("nav1");
            for (i = 0; i < navRoot.childNodes.length; i++) {
                node = navRoot.childNodes[i];
                if (node.nodeName == "LI") {
                    node.onmouseover = function () {
                        this.className += " over";
                    }
                    node.onmouseout = function () {
                        this.className = this.className.replace(" over", "");
                    }
                }
            }
        }
   }
    window.onload = startList;  </script></head>
<body >
<form id="frm1" runat="server"><ul id="nav1"style="margin-top:15px; margin-left:70px">
        <li id="01"><a href="#">nothing is impossible</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Offices</a></li>
            </ul>
        </li>
        <li id="02"><a href="#">test2</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Offices</a></li>
            </ul>
        </li>
        <li id="03"><a href="#">test3</a>
            <ul>
                <li><a href="#">apple</a></li>
                <li><a href="#">juice</a></li>
                <li><a href="#">peach</a></li>
            </ul>
        </li>
        <li id="04" style="border-right: 1px solid #ccc;"><a href="#">test4</a>
            <ul>
                <li><a href="#">United</a></li>
                <li><a href="#">France</a></li>
                <li><a href="#">USA</a></li>
                <li><a href="#">Australia</a></li>
            </ul>
        </li>
    </ul></form></body>
</html>这个菜单第一个Li因为a标签字数太多被撑开了，跟其他Li高度不一样，但是li的height怎么设都不起作用。
如果设定<a>的height，菜单的文字就不是垂直居中了，该怎么实现菜单的文字不论是一行还是两行，都垂直居中？感谢！