[stealthcow]

I'm making a new a CSS navigation which allows drop down menus (using a bit of javascript)

It works fine in FF (see http://www.calvarytempleupc.org.uk )

but in IE you'll notice that when you try to mouseover the dropdowns the menu disappears (EDIT: not due to flash, does it on any page regardless of the flash being there or not). In addition, you'll see that the alignment is off and the last drop down on contact is messed up. Any ideas on how to fix this?

Code for the navigation:

  <div id="navigation">
    <ul>
      <li><a href="http://www.calvarytempleupc.org.uk"><img src="../images/nav/home.gif" alt="Home" border="0" /></a></li>
      <img src="../images/nav/vr.gif" />
      <li onmouseover="change('menu_about');" onmouseout="change_back('menu_about');"><img src="../images/nav/about.gif" width="79" height="32" border="0" alt="" />
        <ul id="menu_about" style="display:none;">
          <li><a href="asdff">Pastor</a></li>
          <li><a href="asdff">Belief/Doctrine</a></li>
          <li><a href="asdff">History</a></li>
        </ul>
      </li>
      <img src="../images/nav/vr.gif" />
      <li onmouseover="change('menu_ministries');" onmouseout="change_back('menu_ministries');"><img src="../images/nav/ministries.gif" width="81" height="32" border="0" alt="" />
        <ul id="menu_ministries" style="display:none;">
          <li><a href="asdff">Youth</a></li>
          <li><a href="asdff">Brotherhood</a></li>
          <li><a href="asdff">Ladies</a></li>
          <li><a href="asdff">Sunday</a></li>
          <li><a href="asdff">Missions</a></li>
          <li><a href="asdff">Others</a></li>
        </ul>
      </li>
      <img src="../images/nav/vr.gif" />
      <li><a href="services.php"><img src="../images/nav/services.gif" alt="Home" width="72" height="32" border="0" /></a></li>
      <img src="../images/nav/vr.gif" />
      <li><a href="events.php"><img src="../images/nav/events.gif" alt="Home" width="61" height="32" border="0" /></a></li>
      <img src="../images/nav/vr.gif" />
      <li><a href="donate.php"><img src="../images/nav/donate.gif" alt="Donate" width="67" height="32" border="0" /></a></li>
      <img src="../images/nav/vr.gif" />
      <li><a href="bible_resources"><img src="../images/nav/bible_resources.gif" alt="Donate" width="90" height="32" border="0" /></a></li>
      <img src="../images/nav/vr.gif" />
      <li><a href="video.php"><img src="../images/nav/video.gif" alt="Donate" width="114" height="32" border="0" /></a></li>
      <img src="../images/nav/vr.gif" />
      <li><a href="faq.php"><img src="../images/nav/faqs.gif" alt="Donate" width="60" height="32" border="0" /></a></li>
      <img src="../images/nav/vr.gif" />
      <li onmouseover="change('menu_contact');" onmouseout="change_back('menu_contact');"><img src="../images/nav/contact.gif" width="67" height="32" border="0" alt="" />
        <ul id="menu_contact" style="display:none;">
          <li><a href="asdff">Contact Details</a></li>
          <li><a href="asdff">Prayer Requests</a></li>
        </ul>
      </li>
    </ul>
  </div>

CSS for the navigation ( http://www.calvarytempleupc.org.uk/css/navigation.css ):

/* CSS rules for navigation dropdowns */

#navigation {
background-color:#FB2D06;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1000;
}

#navigation ul {
list-style-type:none;
padding: 0px;
margin: 0px;
vertical-align:middle;
}


#navigation li  {
display:inline;
background-color:#C12202;
padding: 0px;
margin: 0px;

}

#menu_about {
	width: auto;
	position: absolute;
	left: 66px;
	top: 32px;
}

#menu_about li {
display: block;
background-color: #FB2304;
}

#menu_ministries {
	width: auto;
	position: absolute;
	left: 144px;
	top: 32px;
}

#menu_contact li {
display: block;
background-color: #FB2304;
}

#menu_contact {
	width: 110px;
	position: absolute;
	left: 651px;
	top: 32px;
}

#menu_ministries li {
display: block;
background-color: #FB2304;
}

#navigation ul ul li , #navigation ul ul li {
padding: 1px 15px 1px 5px;
border: 1px solid #ffffff;
border-top: 0px;
}

#navigation ul ul li a , #navigation ul ul li a:visited{
color: #ffffff;
text-decoration:none;
}

#navigation ul ul li:hover{
color: #ffffff;
text-decoration:none;
background-color:#990000;
}

Javascript for the navigation:

<script language="JavaScript">
function change(menuID) {
document.getElementById(menuID).style.display = "inline";
return false;
}
function change_back(menuID) {
document.getElementById(menuID).style.display = "none";
return false;
}
</script>