如何通过css设置2个li重叠在一起--请教

<!-- saved from url=(0022)http://internet.e-mail -->
<!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" />
<style type="text/css"> 
#div1 { position: relative; } #text1{ position: absolute; left: 0; top: 0; font-size: 16px; } 
/*#text2{ position: absolute; left: 0; top: 0; font-size: 10px; -moz-opacity:0;filter: alpha(opacity=0);opacity: 0; } */
#text2{ position: absolute; left: 0; top: 0; font-size: 16px; filter: Alpha(opacity=0);-moz-opacity:0;opacity:0;} 
.textPasswd {
margin:0px; 
PADDING:0px; 
width: 35px;
float:left;
background-color:#FFFFFF;
font-family:"Times New Roman", Times, serif;
border : 1px solid   #7B9EBD;
}
ul.none {list-style-type: none}
.textPasswd1 { margin:0px; 
PADDING:0px; 
width: 35px;
float:left;
background-color:#0066CC;
font-family:"Times New Roman", Times, serif;
border : 1px solid   #7B9EBD;
/*-moz-opacity:0;
filter: alpha(opacity=0);
opacity: 0.2;*/
}.div1 ul{
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none; 
LINE-HEIGHT: normal; 
list-style-type: none ;
}. li1{
PADDING-LEFT:11px; 
list-style-type: none ;
}
. li2{
position: absolute;
left: 0;
top: 20;
PADDING-LEFT:11px; 
list-style-type: none ;
}
.textPasswd_label{ float:left;
}
.textPasswdHidd{ margin:0px; 
PADDING:0px; 
width: 35px;
float:left;
-moz-opacity:0;
filter: alpha(opacity=0);
opacity: 0.2;
background-color:#FFFFFF;
font-family:"Times New Roman", Times, serif;
}
</style> 
<script type="text/javascript" src="UI/ UIControl/ajax_lib_xml.js"> </script> 
<script type="text/javascript"> 
function changeMark1() 
{
    var strvalue = document.getElementById('text2').value;
//var password = String.fromCharCode(e.keyCode); 
    document.getElementById('text1').value = strvalue.replace(/\S|\s/g,"*");
} </script> 
</head> 
<body> 
password: <div id="div1">
<ul class="none">
<li class = "li1">
<input type="text" id="txtPassword1" maxlength = "4" class="textPasswd" ><label class="textPasswd_label">-</label>
<input type="text" id="txtPassword2" maxlength = "4" class="textPasswd"><label class="textPasswd_label">-</label>
<input type="text" id="txtPassword3" maxlength = "4" class="textPasswd"><label class="textPasswd_label">-</label>
<input type="text" id="txtPassword4" maxlength = "4" class="textPasswd">
</li>
<li class = "li2">
  <input name="text" type="text" class="textPasswd1" maxlength = "4" onpropertychange="changeMark1(0)" />
  <label class="textPasswd_label">-</label>
<input type="text" maxlength = "4" class="textPasswd1" onpropertychange="changeMark1(0)" ><label class="textPasswd_label">-</label>
<input type="text"  maxlength = "4" class="textPasswd1" onpropertychange="changeMark1(0)" ><label class="textPasswd_label">-</label>
<input type="text"  maxlength = "4" class="textPasswd1" onpropertychange="changeMark1(0)" >
</li></ul>
</div> 
</body> 
</html>