[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>

[mx]

have you tried changing the display to 'block' ?

[iamtoby]

It is due to flash. In IE flash is displayed over all other content regardless of it's z-index.

[stealthcow]

block doesnt work either...

(iamtoby... fixed the flash problem..)

[stealthcow]

ok, i fixed it...

the problem was that IE was seeing moving the mouse away from the link and calling the close menu javascript, so i made the links have all the padding/borders etc instead of the LI tag and its all sorted