Help with my css drop down menu

I'm coding a layout a friend of mine designed and I'm almost done, but I'm trying to get the navigation to work. My drop down menu is working in FF, but I still can't get it to work with IE. Can anyone point out what I'm doing wrong? I'm assuming it has something to do with the hover state, but I've never really done this before and don't know all the rules.

International Day of Peace Vigil (http://www.jma.duq.edu/users/price/pub/idpv2/)



#menu { display:block; position:relative; float:right; background:#FFFFFF; }
#menu ul { list-style:none; margin:0; padding:0;width:9em; float:left; border:1px solid #234b9a; background:#FFFFFF; }
#menu a, #menu h2 { font: 11px Lucida Grande, Verdana, sans-serif; background:#FFFFFF; font-weight:bold; display:block; margin:0; padding: 2px 3px; }
#menu h2 { color:#333333; font-weight:bold; background:#FFFFFF; }
#menu a { color:#333333; font-weight:bold; text-decoration:none; background:#FFFFFF; }
#menu a:hover { color:#234b9a; font-weight:bold; text-decoration:underline;background:#FFFFFF;}

#menu li { position: relative; background:#FFFFFF; }
#menu ul ul { position: absolute; z-index: 500; background:#FFFFFF; }

#menu ul ul { display:none; background:#FFFFFF; }
div#menu ul li:hover ul { display:block; background:#FFFFFF; }




<div id="menu">
<ul>
<li><h2><a href="about.html"><center>About Us</center></a></h2>
<ul>
<li><a href="bios.html">Bios</a></li>
<li><a href="resolution.html">Resolution</a></li>
</ul></li>
</ul>
<ul>
<li><h2><a href="organizations.html"><center>Organizations</center></a></h2></li>
</ul>
<ul>
<li><h2><a href="faq.html"><center>FAQ</center></a></h2></li>
</ul>
<ul>
<li><h2><a href="support.html"><center>Support</center></a></h2>
<ul>
<li><a href="help.html">How to Help</a></li>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="commit.html">Make a Commitment</a></li>
<li><a href="commitmentsarchive.html">2007 Commitments</a></li>
</ul></li>
</ul>
<ul>
<li><h2><a href="downloads.html"><center>Downloads</center></a></h2></li>
</ul>
<ul>
<li><h2><a href="mailto:info@idpvigil.com" target="_blank"><center>Contact Us</center></a></h2></li>
</ul>
</div>

Are you using IE6? If so you might need to upload csshover.htc.

Download it here (http://www.xs4all.nl/~peterned/csshover.html), upload it to your base directory, and add

<!--[if IE 6]>

<style type="text/css"> body { behavior: url(csshover.htc);} </style>

<![endif]-->

to your head of your markup file.

That solved IE6 hover problems for me.

wait. is this is a script I copy into my markup? I've never heard of .htc before.

No, it's an external file you reference in IE with the IE-specific (as far as I know) behavior property. You might even be able to add it to your CSS without the "If IE" hack (FF, etc would just ignore it), but I would use the hack initially just to be safe.