css drop menu problem

Hi
I have searched this forum for this issue, and have found many threads with explanation. I have tried all of them, but it does not work.
My problem is that my css drop down menu works in firefox, but not in ie7. The site is [url]http://redesign.des-us.com/[/url], and this concerns the top menu. The code I am using is this:

[code=html]
<div id=”topmenu”>
<ul>
<li><a href=”index.asp”>Home </a><img src=”images/seperator.gif” width=”5″ height=”5″ /></li>
<li><a href=”about.asp”>About Us </a><img src=”images/seperator.gif” width=”5″ height=”5″ /></li>
<li><a href=”web.asp”>Web </a><img src=”images/seperator.gif” width=”5″ height=”5″ />
<ul id=”subnav”>
<li>| <a href=”webservices.asp#design”>Design</a> | </li>
<li><a href=”webservices.asp#dev”>Applications</a> | </li>
<li><a href=”webservices.asp#graphics”>Graphics</a> | </li>
<li><a href=”webservices.asp#other”>Services</a> |</li>
</ul>
</li>
<li><a href=”erp.asp”>ERP </a><img src=”images/seperator.gif” width=”5″ height=”5″ /></li>
<li><a href=”portfolio.asp”>Portfolio </a><img src=”images/seperator.gif” width=”5″ height=”5″ />
<ul id=”subnav”>
<li>|<a href=”#”> ERP</a> | </li>
<li><a href=”#”>Design</a> | </li>
<li><a href=”#”>Application</a> | </li>
<li><a href=”#”>Templates</a> | </li>
<li><a href=”#”>Office Docs </a> |</li>
</ul>
</li>
<li><a href=”resources.asp”>Resources </a><img src=”images/seperator.gif” width=”5″ height=”5″ />
<ul id=”subnav”>
<li>|<a href=”resources.php”> Links</a> | </li>
<li><a href=”templates.htm”>Templates</a> | </li>
<li><a href=”articles.php”>Articles</a> | </li>
<li><a href=”jobs.htm”>Employment</a> | </li>
<li><a href=”blog.des-us.com”>Blog </a> |</li>
</ul>
</li>
<li><a href=”contact.asp”>Contact </a><img src=”images/seperator.gif” width=”5″ height=”5″ /></li>
<!– combine contact and feedback forms –>
<li><a href=”sitemap.asp”>Site Map</a> </li>
</ul>
</div>
[/code]

The css is:

[CODE]
#topmenu {text-align:right;}
/* 1st level */
#topmenu ul {padding:0; margin:0; list-style:none; position:relative;}
#topmenu ul li {display:inline; padding:3px; border-bottom:thin solid #F99400;}
#topmenu ul li a, a:hover, a:visited {color:#FFFFFF; text-decoration:none;}

/*2nd level */
#topmenu ul ul {position:absolute;top:25px; left:30%; text-align:right; display:none; width:auto;}
#topmenu li:hover ul#subnav, #topmenu li.over ul#subnav {display:block;}
#topmenu li:hover ul#subnav li a, #topmenu li:hover ul#subnav li a:hover {padding:2px;}
[/CODE]

The javascript is:

[CODE]
// JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById(“topmenu”);
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;
[/CODE]

Can anyone please help me?

Also in #CSS _↴