助けが必要です。
登録協会のために作成したホームページを最適化しています。
IE8 と IE7 をサポートしたい。
ドロップダウン ナビゲーションを使用しています。「Verein」にカーソルを合わせると、ドロップダウン メニューが「Vorstand、Satzung、...」という内容で下にスライドするはずです。
ここに私の問題があります。ドロップダウンは IE9、IE10、Firefox、Chrome、および Safari で機能しています。しかし、IE8 で「Verein」にカーソルを合わせると、サブメニューが下にスライドしません。見えないそうです。
私はその多くのコードを知っているので、ミリムースが提案したようにjsFiddleの例（コードを減らしたもの）を作成しました： 例
jsFiddle は IE7 でうまく動作するので、css 関連のものがあると思います。
サイトの実際の例: geschichtsverein-bademstal.de
ここにhtml構造：
<section id="navigation">
<!-- Navigation Oben -->
<div id="navigation_bg"></div>
<ul id="nav" class="nav">
<li class="kontakt"><a href="#">Top</a>
<ul class="sub">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
</ul>
</section>
ここに私のCSS：
ul.nav {
position: relative;
float: right;
margin: -260px 10px 0 0;
font-size: 12px;
-ms-filter:"progid:DXImageTransform.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:"progid:DXImageTransform.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");
}
そしてここで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();
});
});
編集：私の問題を解決しました
私のcssで次のコードを削除したところ、現在は機能しています。
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
filter: alpha(opacity=80); /* IE 5-7 */
役に立つコメントをありがとう！