vertical menu doesn't work in IE8 if background is transparent

this is my very first the site im working on: www.olgoya.com

The problem is that all major browsers except IE8 display the submenu as well when mouse is over on 'portfolio' item. What i could figure out is that the problem is with the parent object's opacity settings, if i remove it, IE is able to display the submenu as well.

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 {
/*
 border-top: 1px soli开发者_开发百科d #FFF;
 border-right: 1px solid #FFF;
*/
 padding: 6px;
 display: block;
/*
 background: #DDD;
 color: #666;
 font: bold 11px Arial, sans-serif;
*/
 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;
/*  color: #FFF;
 border-right: 1px solid #000;
 border-left: 5px solid #000;
*/
}

/* 2nd Menu */
ul#navmenu-v li:hover li a,ul#navmenu-v li.iehover li a {
 float: none;
 background: #000;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-v li:hover li a:hover,ul#navmenu-v li:hover li:hover a,ul#navmenu-v li.iehover li a:hover,ul#navmenu-v li.iehover li.iehover a {
 background: #999;
}

/* 3rd Menu */
ul#navmenu-v li:hover li:hover li a,ul#navmenu-v li.iehover li.iehover li a {
 background: #999;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-v li:hover li:hover li a:hover,ul#navmenu-v li:hover li:hover li:hover a,ul#navmenu-v li.iehover li.iehover li a:hover,ul#navmenu-v li.iehover li.iehover li.iehover a {
 background: #666;
}

/* 4th Menu */
ul#navmenu-v li:hover li:hover li:hover li a,ul#navmenu-v li.iehover li.iehover li.iehover li a {
 background: #666;
}

/* 4th Menu Hover */
ul#navmenu-v li:hover li:hover li:hover li a:hover,ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
 background: #333;
}

/* Hover Function - Do Not Move */
ul#navmenu-v li:hover ul ul,ul#navmenu-v li:hover ul ul ul,ul#navmenu-v li.iehover ul ul,ul#navmenu-v li.iehover ul ul ul { display: none; }
ul#navmenu-v li:hover ul,ul#navmenu-v ul li:hover ul,ul#navmenu-v ul ul li:hover ul,ul#navmenu-v li.iehover ul,ul#navmenu-v ul li.iehover ul,ul#navmenu-v ul ul li.iehover ul { display: block; }

Please check it and tell me how could i have the menu transparently in the mighty IE too!

Good ol' Internet Explorer and it's lack of opacity support! Thankfully IE9 has support for opacity. In the meantime, you can sometimes get around this by setting the opacity with jQuery:

$('#menubg').css('opacity', '0.5');

UPDATE
Since that didn't work for you, what you will have to do is create a 1px width, 1px height .png of color #000 and opacity at 50%. Then use this css rule:

#menubg { background:url(/path/to/png.png) repeat;}

And get rid of that filter, it's the devil.