Drop down menus appearing in all browsers except Internet Explorer

[cursor]

Hi everyone,

A site I'm working on works fine in every browser except IE. Drop down menus don't work and an image rotator in Flash just displays a white box. Here's the relevant CSS:

#navigation {
  float: left;
  background-color:#002663;
  opacity:0.9;
  width:948px;
  font-size:14px;
  font-family: Brawler;
  color:#ffffff;
  margin-top:9px;
  padding:16px 0px 0 12px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
#navigation ul {
  float:left;
  padding:0 10px 0 0;
  margin-left:0;
}
#navigation li {
  float:left;
  display:inline;
  height:30px;
  font-size:1em;
  padding:0px 20px 6px 10px;
}
#navigation a:link  {
  color:#fff;
  text-decoration:none;  
}
#navigation a:hover  {
  color:#ffffff;
  text-decoration:none;  
  background-color:#00418e;
}
#navigation a:visited  {
  color:#fff;
  text-decoration:none;  



/****************************** flyout menus ******************************/

#weebly-menus .weebly-menu-wrap {
  z-index: 5000;
}

#weebly-menus .weebly-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

#weebly-menus .weebly-menu li {
  float: left;
  clear: left;
  width: 200px;
  padding-left:0px;
  margin-left:0px;
  text-align: left;
  font-family: Brawler;
}

#weebly-menus .weebly-menu li a {
  position: relative;
  display: block;
  opacity:0.9;
  width: 100%;
  background: #002663;
  border-right: 1px solid #394c5b;
  border-left: 1px solid #394c5b;
  border-bottom: 1px solid #394c5b;
  text-decoration: none;
  font-size: 14px;
  font-weight: normal;
  font-family: Brawler;
  line-height:1;
  padding:2px;
  padding-left:0px;
  margin-left:0px;
  color: #fff;
}

#weebly-menus .weebly-menu li a:hover {
  background: #00418e;
}

#weebly-menus span.weebly-menu-title {
  display: block;
  padding: 5px 10px;
  font-family: Brawler;
}

#weebly-menus span.weebly-menu-more {
  background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
  display: block;
  position: absolute;
  right: 5px;
  top: 0px;
  font-family: Brawler;
  height: 28px;
  line-height: 28px;
  padding:1px 0 1px 0;
}

I imagine there's a line of code I need to get this to work but I've tried everything I can think of. My Flash plug-in is up-to-date but still the animation will not play.

Any advice would be greatly appreciated.

Thanks in advance.

[teedoff]

You have quite a few coding errors, particularly within the code for your menu such as several mismatched tags. You should try to fix them and then see how it behaves.

[cursor]

You have quite a few coding errors, particularly within the code for your menu such as several mismatched tags. You should try to fix them and then see how it behaves.

Thanks. Admittedly, the majority of the code was generated by Weebly or is a Weebly template. I'll sift through and iron out any rogue code as best I can.

[teedoff]

Yes, the majority of the code was generated by some applications or CMS, but those mismatched tags are page killers...lol At least fix those and see if it renders correctly. If not, then we can go from there.

[cursor]

Got the Flash animation going by validating the Object tag. Menus are working but are now behind the Flash animation! I've had this before and I managed to sort it eventually - I only wish I remember how! Will persevere.

Some of the CMS HTML and CSS is beyond my control - there's only a certain amount a user can edit.

[rrdesign]

Maybe try adding:

z-index:10;

to the #navigation li

I could not test it because i don't have firebug in iexplorer.

[cursor]

Maybe try adding:

z-index:10;

to the #navigation li

I could not test it because i don't have firebug in iexplorer.

I've validated the HTML as much as I can. The rest of the HTML is generated by Weebly and I cannot edit it. The Flash animation works, as do the drop-down menus. However, the drop-down menus appear behind the Flash animation regardless of z-index allocations. I tried moving the menus forwards, the Flash animation backwards but the result is the same (in IE anyway).

If I ditch the <OBJECT> tag and drop in a JPG with a <IMG> tag, the menus appear on top of the JPG as expected. This tells me IE still isn't happy with the <OBJECT> tag and/or the Flash animation within. I've also tried an <IFRAME> method which didn't work. Is there any other way of displaying a Flash animation?