菜鸟求助各位大虾一个下拉菜单的问题

我该怎么改  让我的这个下拉菜单在点击一下后，自动伸缩回去，
以下是代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>123</title>
<style type="text/css">
.menu {
font-family: arial, sans-serif; 
width:750px; 
margin:0; 
margin:0px 0;
}
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
.menu ul li {
float:left; 
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block; 
text-align:center; 
text-decoration:none; 
width:104px; 
height:19px; 
color:#000; 
border:1px solid #fff;
border-width:0px 1px 0 0;
background:#CFDEFD; 
line-height:19px; 
font-size:11px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#fff; 
background:#b3ab79;
}
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:19px; 
left:0; 
width:105px;
}
.menu ul li:hover ul li a {
display:block; 
background:#faeec7; 
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#dfc184; 
color:#000;
}body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
<!--[if lte IE 6]><style type="text/css">table {
border-collapse:collapse;
margin:0; 
padding:0;
}.menu ul li a.list, .menu ul li a:visited.list {
display:none;
}.menu ul li a:hover {
color:#fff; 
background:#A0A0A0;
}.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:19px; 
left:0; 
width:105px;
}.menu ul li a:hover ul li a {
background:#D9D9D9; 
color:#000;
}.menu ul li a:hover ul li a:hover {
background:#EEEEEE; 
color:#000;
}</style><![endif]-->
<style type="text/css">
<!--
.style1 {
font-family: arial, sans-serif;
font-size: 12px;
}
-->
</style>
</HEAD>
<body>
  <table width="100%" height="18" border="0" cellpadding="0" cellspacing="0" bgcolor="#CFDEFD">
              <tr>
                <td valign="bottom">
<div class="menu">
<ul>
<li><a href="#" class="list">菜单1</a><!--[if lte IE 6]>
<a href="#">菜单1
<table><tr><td>
<![endif]-->    <ul>
    <li><a href="#")">菜单1</a></li>
    <li><a href="#")" >菜单1</a></li>
    </ul><!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]--></li><li><a href="#" class="list">菜单2</a><!--[if lte IE 6]>
<a href="#">菜单2
<table><tr><td>
<![endif]-->    <ul>
    <li><a href="#")">菜单2</a></li>
    <li><a href="#")">菜单2</a></li>
    <li><a href="#")">菜单2</a></li>
    <li><a href="#")">菜单2</a></li>
    </ul><!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]--></li><li><a href="#" class="list">菜单3</a><!--[if lte IE 6]>
<a href="#">菜单3
<table><tr><td>
<![endif]-->    <ul><li><a href="#">菜单3</a></li>
    <li><a href="#">菜单3</a></li>
    </ul><!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]--></li>
</li>
</ul><!-- clear the floats if required -->
<div class="clear"> </div></div> </td>
              </tr>
      </table>
</body>
</html>