Hi all,
I'm trying to use EasyMenu (http://www.easymenu.co.uk) for a site at the moment and am having trouble with the layout in Opera (on XP SP3 at various screen resolutions). It actually seems to look quite different in every browser on my PC but Opera is the worst...
The problem is that the drop-down menu actually sits up over the top of the menu bar itself, rather than below the menu bar, where it should and does quite happily in IE8 on my PC.
I thought that was the only problem until I showed it to someone else who has IE6 on their computer and apparently it does something similar.
Another person I showed it to who says he is using IE8 (also on XP SP3 - he's a techie so I think he's telling the truth), told me that it appears similar again on his PC.
I'm completely at a loss as to why this is happening so if anyone can help I'd be ecstatic!
Menu CSS:

#mainMenu {
 position: relative;
 margin: auto;
 text-align: left;
 width: 100%; 
 background-color: #000000;
 color: #ffffff;
 padding-top: 10px;
 padding-bottom: 30px;
 padding-left:0px;
 z-index: 100;
}
#menuList {
 text-align:left;
 margin: 0px;
 margin-left: 10px; 
 padding: 0px;
 z-index: 100px;
}
#menuList ul {
 margin: 0px;
 padding: 0px;
 z-index: 100;
}
#menuList li {
 display:inline;
 list-style: none;
 margin-right: -5px; 
 padding: 0px;
}
a.starter {
 background-color: #000000; 
 color: #B3DEEE; 
 font-size: 14px;
 margin: 0px;
 padding: 9.9px; 
 padding-top: 2px;
 padding-bottom: 2px;
 text-decoration: none;
 border-left: 1px solid #333333; 
 border-right: 1px solid #333333;  
 z-index:100;
}
a.starter:hover, a.starter:active, a.starter:focus {
 background-color: #707070;
 color: #B3DEEE; 
}
#submenu-archive {
 width: 100px;
}
#submenu-program {
 width: 160px;
}
.menu {
 text-align: left;
 color: #FFFFFF;
 background-color: #707070;
 position: absolute;
 visibility: hidden;
 z-index: 100;
}
.menu li a {
 background-color: transparent;
 color: #FFFFFF; 
 display: block;
 font-size: 13px;
 line-height: 16px;
 margin-top: -20px;
 padding: 5px;
 padding-left: 15px;
 padding-right: 5px;
 text-decoration: none;
}
.menu li a:hover, .menu li a:active, .menu li a:focus {
 background-color: #7DB9D0; 
 color: #333333;
}

Menu HTML:

  <div id="mainMenu">
   <ul id="menuList">
    <li class="menubar"><a class="starter" accesskey="1" title="" href="index.htm">ABOUT BFF</a></li>
    <li class="menubar"><a class="starter" accesskey="2" title="" href="#">2010 PROGRAM</a>
     <ul id="submenu-program" class="menu">
      <li><a title="" href="overview.htm">Program Overview</a></li>
      <li><a title="" href="opening.htm">Opening Night</a></li>
      <li><a title="" href="special.htm">Special Events</a></li>
      <li><a title="" href="background.htm">Youth Documentaries</a></li>
      <li><a title="" href="digital.htm">Digital Stories</a></li>
      <li><a title="" href="jumpcut.htm">Jump Cut</a></li>
      <li><a title="" href="workshops.htm">Workshops</a></li>
     </ul>
    </li>
    <li class="menubar"><a class="starter" accesskey="3" title="" href="tickets.htm">BUY TICKETS</a></li>
    <li class="menubar"><a class="starter" accesskey="4" title="" href="sponsors.htm">SPONSORS</a></li>
    <li class="menubar"><a class="starter" accesskey="5" title="" href="newsroom.htm">NEWSROOM</a></li>
    <li class="menubar"><a class="starter" accesskey="6" title="" href="contacts.htm">CONTACTS</a></li>
    <li class="menubar"><a class="starter" accesskey="7" title="" href="#">BFF ARCHIVES</a>
     <ul id="submenu-archive" class="menu">
      <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/arts_b...">2009</a></li>
      <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/archiv...">2008</a></li>
      <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfe...">2007</a></li>
      <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfe...">2006</a></li>
      <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfe...">2005</a></li>
      <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfe...">2004</a></li>
     </ul>
    </li>
   </ul>
  </div>

Let me know if you need to know anything else...
Thanks so much in advance!
Neil

PS. I guess it would help to see the site - http://www.smartweb.net.au/bff

Oh and I just checked it via Safari on iPhone and found another problem (though it's not the end of the world if this one doesn't get fixed)... The menu seems to work okay but instead of being in one line across the screen, it doubles over into two lines! Any ideas why?

It has some rather funky behavior in Firefox 3 too.
There's really no need for javascript to achieve that menu either and since it appears the code is nearly 5 years old, that may be part of your problems.

IE 7 and below have major issues with positioning and the z-index stacking order.

Thanks for the reply Ladynred...

The reason I chose this menu system was for it's keyboard accessibility. The website needs to be accessible to people who don't necessarily have the manual dexterity to handle a mouse.

Do you know of a way I can implement a completely keyboard accessible menu that looks exactly the same as this one without Java? (and without spending hours trying to figure out how to code it!)?

Cheers
Neil

By the way, I just noticed if you grab the source code from here - http://www.easymenu.co.uk/dl/em12d.zip - it works perfectly fine in all the browsers I've tried it in... Can you see the difference between that and mine?