This is the first website I am working on: www.olgoya.com
The issue I am facing is that all major browsers, except IE8, display the submenu even when the mouse hovers over the 'portfolio' item. Upon investigation, I found that the problem lies with the opacity settings of the parent object. When I remove the opacity setting, IE is able to display the submenu properly.
Parent object formatting:
ul, li{text-align:right; margin:0; padding:0; list-style:none;}
#menubg{position:absolute;top:1px;width:130px;left:25px;background:#000;opacity:0.5;filter:alpha(opacity=50);-khtml-opacity: 0.5;-moz-opacity: 0.5;bottom:1px;z-index:3}
Vertical menu formatting:
/*
Author: Craig Erskine
Description: Dynamic Menu System - Vertical
*/
ul#navmenu-v,ul#navmenu-v li,ul#navmenu-v ul {
width: 130px; /* Menu Width */
margin: 0;
list-style: none;
}
ul#navmenu-v li { float: left; position: relative; width: 100%; }
ul#navmenu-v li.iehover { z-index: 1000;/* IE z-index bugfix */ }
ul#navmenu-v ul {
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: 9999;
}
/* Root Menu */
ul#navmenu-v a {
padding: 6px;
display: block;
text-decoration: none;
height: 1%;
}
/* Root Menu Hover Persistence */
ul#navmenu-v a:hover,ul#navmenu-v li:hover a,ul#navmenu-v li.iehover a {
background: #444;
}
/* Remaining menu styles omitted for brevity */
I would appreciate it if you could review the code and provide suggestions on how to make the menu transparent in Internet Explorer as well.