Помогите зделать из из этого меню выпадающее!
Code
<head>
<style type="text/css">
body {background: #ffffff}
ul#main {margin:0;
padding:0;
list-style:none;
width:1000px;
float:left;}
ul#main li {
float:left;
display:block;
width:141px;
height:48px;
background: url('http://i032.radikal.ru/0801/f6/3a8ad8311b92.jpg') right top repeat-x;}
ul#main a{
float:left;
background: url('http://i032.radikal.ru/0801/f6/3a8ad8311b92.jpg') left top repeat-x;
display:block;
width:141px;
height:48px;
text-align:center;
text-decoration:none;
color:#fff;
font:10pt Arial;
line-height:30px;
}
ul#main a:hover{
background:none;
}
</style>
</head>
<body>
<ul id="main">
<li><a href="САЙТ1.cfm"><font color=gold>раздел</font></a></li>
<li><a href="переход/форум.dwt"><font color=gold>раздел</a></li>
<li><a href="#"><font color=gold>раздел</font></a></li>
<li><a href="#"><font color=gold>раздел</font></a></li>
<li><a href="#"><font color=gold>раздел</font></a></li>
</ul>
<script type="text/javascript" language="JavaScript">
var loc=location.href
var a=document.getElementById('menu').getElementsByTagName('a')
var aHref=new Array()
var num=parseInt(a.length)-1
for (var i=num;i>=0;i--) {
var Href=a[i].href
if (loc.indexOf(Href)==-1) {
continue
}else{
a[i].style.backgroundImage='none'
break}
}
</script>
</body>
</html>