I need some help.I am optimizing a homepage i made for a registered association.I want to support IE8 and IE7.I am using a Dropdown navigation. If I hover on "Verein" a dropdown menu should slide down with the content "Vorstand, Satzung, ...".Now here is my problem:The dropdown is working in IE9, IE10, Firefox, Chrome and Safari. But if I hover on "Verein" in IE8 the submenu wont slide down. It seems to be invisible.I know its alot of code so I made a jsFiddle example like millimoose suggested:ExampleThe jsFiddle works fine for me in IE7 so I believe its some css relevant stuff.Here a live example of the site: geschichtsverein-bademstal.deHere the html Code:<section id="navigation"> <!-- Navigation Oben --> <div id="navigation_bg"></div> <ul id="nav" class="nav"> <li class="kontakt"><a href="http://stackoverflow.com/kontakt.html">Top</a> <ul class="sub"> <li><a href="http://stackoverflow.com/kontakt/impressum.html">Sub 1</a></li> <li><a href="http://stackoverflow.com/kontakt/impressum.html">Sub 2</a></li> </ul> </li> </ul></section>Here my CSS:ul.nav { position: relative; float: right; margin: -260px 10px 0 0; font-size: 12px; -ms-filter:"progid
XImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */ filter: alpha(opacity=80); /* IE 5-7 */ z-index: 200;}ul.nav li { position: relative; display: block; float: left;}/* Text Navileiste */ul.nav a { display: block; padding: 4px 10px 5px 10px; color: #FFFFFF; text-decoration: none; vertical-align: middle; font-weight: bold;}ul.nav li:hover { background: #FFFFFF;}ul.nav li:hover a { color: #000000;}/* Dropdown Navileiste */ul.nav ul { position: absolute; display: none; width: 140px; padding: 0; background-color: #FFFFFF; z-index: 9999;}ul.nav ul li { float: none;}/* Text Dropdown Navileiste */ul.nav ul a { text-align: left; color: #000000; font-weight: normal; width: 140px;}/* Hovereffekt */ul.nav ul li:hover > a { background-color: #CCCCCC; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */ filter: alpha(opacity=80); /* IE 5-7 */}/* Dropdown > Ebene 1 */ul.nav ul ul{ position: absolute; top: 0; left: 100%; border-left: 1px solid #4C4C4C;}/* Pfeilsymbol Dropdown */ul.nav span { display: block; overflow: visible; background-position: right center; background-repeat: no-repeat;}ul.nav ul span { background-image:url("../../img/icons/arrowsub.png");}And here the JS: /* Subnav Ebene 1 */$('.nav').children('li').each(function(){ $(this).bind('mouseenter',function(){ $(this).find('.sub').slideDown(300); }).bind('mouseleave',function(){ $(this).find('.sub').stop(true,true).hide(); });});/* Subnav Ebene 2*/$('.nav li ul').children('li').each(function(){ $(this).bind('mouseenter',function(){ $(this).find('.sub_2').slideDown(300); }).bind('mouseleave',function(){ $(this).find('.sub_2').stop(true,true).hide(); });});/* Subnav Ebene 3 */$('.nav li ul ul').children('li').each(function(){ $(this).bind('mouseenter',function(){ $(this).find('.sub_3').slideDown(300); }).bind('mouseleave',function(){ $(this).find('.sub_3').stop(true,true).hide(); });});EDIT:Solved my problemJust deleted following Code in my css and now its working.-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */ filter: alpha(opacity=80); /* IE 5-7 */Thanks for every helpfull comment!
XImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */ filter: alpha(opacity=80); /* IE 5-7 */ z-index: 200;}ul.nav li { position: relative; display: block; float: left;}/* Text Navileiste */ul.nav a { display: block; padding: 4px 10px 5px 10px; color: #FFFFFF; text-decoration: none; vertical-align: middle; font-weight: bold;}ul.nav li:hover { background: #FFFFFF;}ul.nav li:hover a { color: #000000;}/* Dropdown Navileiste */ul.nav ul { position: absolute; display: none; width: 140px; padding: 0; background-color: #FFFFFF; z-index: 9999;}ul.nav ul li { float: none;}/* Text Dropdown Navileiste */ul.nav ul a { text-align: left; color: #000000; font-weight: normal; width: 140px;}/* Hovereffekt */ul.nav ul li:hover > a { background-color: #CCCCCC; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */ filter: alpha(opacity=80); /* IE 5-7 */}/* Dropdown > Ebene 1 */ul.nav ul ul{ position: absolute; top: 0; left: 100%; border-left: 1px solid #4C4C4C;}/* Pfeilsymbol Dropdown */ul.nav span { display: block; overflow: visible; background-position: right center; background-repeat: no-repeat;}ul.nav ul span { background-image:url("../../img/icons/arrowsub.png");}And here the JS: /* Subnav Ebene 1 */$('.nav').children('li').each(function(){ $(this).bind('mouseenter',function(){ $(this).find('.sub').slideDown(300); }).bind('mouseleave',function(){ $(this).find('.sub').stop(true,true).hide(); });});/* Subnav Ebene 2*/$('.nav li ul').children('li').each(function(){ $(this).bind('mouseenter',function(){ $(this).find('.sub_2').slideDown(300); }).bind('mouseleave',function(){ $(this).find('.sub_2').stop(true,true).hide(); });});/* Subnav Ebene 3 */$('.nav li ul ul').children('li').each(function(){ $(this).bind('mouseenter',function(){ $(this).find('.sub_3').slideDown(300); }).bind('mouseleave',function(){ $(this).find('.sub_3').stop(true,true).hide(); });});EDIT:Solved my problemJust deleted following Code in my css and now its working.-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */ filter: alpha(opacity=80); /* IE 5-7 */Thanks for every helpfull comment!