Why is my menu messed up in Opera but OK in IE

[Julianne]

I followed a CSS menu tutorial at
[url]http://www.interspire.com/content/articles/10/1/Building-An-Expanding-DHTML-Menu[/url]
-With-CSS-and-JavaScript. I've made some adjustments so the appearance fits
better with my site and in IE it looks as it should, ie the menu items that I
want to expand to show a sub-menu do this and the hover background colour works.

However, in Opera the whole thing is completely messed up. It's as if it's
ignoring the menu altogether because it's displaying the items that come after
the menu on top of it! Not only that but if you click a menu item it shows the
sub-menu for just a split second then it disappears.

Here's a test page I've put up: [url]http://www.leevalleylions.co.uk/test.php[/url]

I can't get the hover "rollover" effect unless I wrap the menu in a div (div
class="menu1">). If I remove the div from around the menu then the layout in
IE and Opera is fine, but the menu links just show as normal page links and the
sub-menus still won't display in Opera. The test page has the div, so does
show the rollovers. Here's the menu HTML (with the enclosing div):

<div class="menu1">
<a href="../index.php" class="menu1">Home Page</a>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Fixtures &amp;
Results</a>
<div id="mymenu2" class="hide">
<a href="../results/index.php" class="submenu">2006/07 Season</a>
<a href="../results/season0506/index.php" class="submenu">2005/06
Season</a>
</div>
<a href="../photos/index.php" class="menu1">Photos</a>
<a href="#" class="menu1" onclick="showHide('mymenu4')">Player Info</a>
<div id="mymenu4" class="hide">
<a href="../players/index.php" class="submenu">Players 2006/07</a>
<a href="../players/2005-06.php" class="submenu">Players 2005/06</a>
</div>
<a href="#" class="menu1" onclick="showHide('mymenu5')">Lions in Print</a>
<div id="mymenu5" class="hide">
<a href="../print/index.php" class="submenu">Link One here</a>
<a href="../print/2005-06.php" class="submenu">Link Two here</a>
</div>
<a href="../nostalgia/index.php" class="menu1">Team History</a>
<a href="../sponsorship.php" class="menu1">Sponsorship</a>
<a href="../merchandise/index.php" class="menu1">Merchandise</a>
<a href="../downloads/index.php" class="menu1">Downloads</a>
<a href="../forum/index.php" class="menu1">Forum</a>
<a href="../guestbook/index.php" class="menu1">Guestbook</a>
<a href="../contact/contact.php" class="menu1">Contact Us</a>
<a href="http://www.leevalleylions.org.uk" target="_blank"
class="menu1">Junior Lions</a></div>

Here is the relevant CSS:

/*LEFT CELL*/
.leftcell {
width: 180px;
height:450px;
border-right:1px solid black;
vertical-align:top;
padding-top:10px;
background: #ffffff;
font-size: 11px;
margin-left: 7px;
margin-top:0px;
margin-bottom:0px;
font-weight:normal;
}

.leftcell p {
padding-left:5px;
}
#menuphoto {
background-image:url(../images/newlions/background-vas.jpg);
background-repeat:no-repeat;
}
/*MENU*/

.menu1{
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom: 0px;
display:block;
text-decoration: none;
color: #000000;
height: 15px;
font-size:13px;
font-weight:bold;
}

.menu1 a:link, .menu1 a:visited {
text-decoration:none;
}
.menu1 a:hover, .menu1 a:active {
color:#FFFFFF;
background-color:#1ca962;
}

.submenu{
display: block;
height: 15px;
margin-left: 10px;
padding-left: 7px;
color: #333333;
font-size:11px;
font-weight:normal;
}

.hide{
display: none;
}

.show{
display: block;
}

.leftheading {
padding-bottom:3px;
border-bottom:1px solid black;
padding-left:5px;
}

I've tried everything I can think of but nothing I try will make the menu
appear as it should in Opera. I'd be really grateful if someone could tell me
where I'm going wrong - many thanks.

[TPK]

Hi Julianne,

I'm not sure this will be the answer, but have you tried assigning a "a-index"
to a div tag that would "enclose" your menu?

Esentially this would make the content of that tag "float" above other div
tags with a lower z-index value.

I don't remember the rules for Opera and the use of div tags, but it would be
easy to try.

TPK

[TPK]

Pardon me but I fat fingered the div tag. I meant to say "z-index" rather than
"a-index".

Also, since you are using a style tag I'm not sure you would want
position:absolute, which will float the div layer around or position:relative
which fixes the position relative to other elements.

TPK

[Julianne]

Thanks for your answers. I did a bit of experimenting and I can only think
that Opera didn't like me using the class in the div and then again in the
menu. I created a new class just for the link rollover effects, put the menu
inside a div with that class and it worked just fine.