Hi,
I am using a CSS hover menu (with a IE fix) to navigate a website. It is working fine in all browsers except for Opera for Windows (and possibley old version of NN). What happens is the menu opens up and works fine unless there is other html that appears below it. When there is other html below the menu will appear but as you drag your mouse down if there happens to be any text underneath it the menu will close. I assume it's a layering sort of problem (although it's strange it only happens in opera). I can't really assign a layer to the menu links or the html underneath because it causes all sorts of positioning problems (position:absolute causes some ugly effects). Any ideas?
I can't attach the pages because there is stuff on them I can't share, but below I will copy some of the CSS stuff. You will see some strange z-indexing in an attempt to get it to work (I failed).
Thank You
/* Center or main content */
#centerDoc {
width: 800px;
position: absolute;
z-index: -11;
top: 140px;
left: 165px;
background-color: #FFFFFF;
height: auto;
}
#centerdoc h2, #left h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #FF0000;
border-bottom: 1px solid #000066;
z-index: 1;
}
/* Menu CSS */
#menu {
width: 100%;
background: #000066;
float: left;
position: absolute;
top: 90px;
z-index: 10;
padding: 0px 0px 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 6em;
float: left;
z-index: 10;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 2px 3px;
z-index: 10;
}
#menu h2 {
color: #fff;
background: #000066;
text-transform: uppercase;
z-index: 10;
}
#menu a {
color: #FFFFFF;
background: #000066;
text-decoration: none;
z-index: 10;
}
/* #menu a {
color: #000066;
background: #efefef;
text-decoration: none;
z-index: 13;
}*/
#menu a:hover {
background-color: #FFFFFF!important;
color: #FF0000!important;
z-index: 13;
}
/*Positioning the Popout and Drop Down Menue */
#menu li {
position: relative;
z-index: 14;
border: 2px solid #000066;
}
#menu ul ul {
position: absolute;
z-index: 14;
}
#menu ul ul ul {
top: 0;
left: 100%;
z-index: 14;
}
/* hiding and re-hiding */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}