vertikales Menü funktioniert nicht in IE8, wenn Hintergrund transparent ist

Question

dies mein allererstes der Seite im arbeitet an: www.olgoya.com

Das Problem ist, dass alle gängigen Browser außer IE8 auch das Untermenü angezeigt wird, wenn die Maus über eingeschaltet ist 'Portfolio' Artikel. Was ich herausfinden könnte, ist, dass das Problem mit den Opazitätseinstellungen des Elternobjekts ist, wenn ich es entferne, kann IE auch das Untermenü anzeigen.

Geordnetes Objekt Formatierung:

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} 

Vertikale Menü Formatierung:

/* 
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 solid #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; } 

Bitte überprüfen und mir sagen, wie kann ich das Menü transparent im mächtigen IE habe auch!

Answer 1

Guten alten Internet Explorer und es ist Mangel an Opazität Unterstützung! Glücklicherweise unterstützt IE9 die Opazität. In der Zwischenzeit kann man manchmal dieses Problem umgehen, indem Sie die Opazität mit jQuery Einstellung:

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

UPDATE
Da dies nicht für Sie arbeiten, was Sie tun müssen, ist eine 1px Breite erstellen, 1 px Höhe .png der Farbe #000 und Opazität bei 50%. Verwenden Sie dann diese CSS-Regel:

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

Und loswerden dieses Filters, es ist der Teufel.