кросс-браузерная версия CSS-меню с только подменю НЕ показывается в IE9, показывается в IE5678, FF, saf, op - PullRequest
Новая
       16

кросс-браузерная версия CSS-меню с только подменю НЕ показывается в IE9, показывается в IE5678, FF, saf, op

1 голос
/ 27 октября 2011

Я присоединяюсь к этому test.htm с включенной навигацией CSS. я тестирую во всех браузерах и вижу, что IE9 не показывает подменю? в Firefox и Opera подменю уже подчеркнуто, где в IE 5 6 7 8 и Safari правильно подчеркнуты в качестве активной ссылки. Пожалуйста, помогите мне пересечь этот простой CSS! Спасибо за вашу помощь здесь следует полный тестовый файл (htm): 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
background-color:#214523;
overflow:hidden;
}   

#centreer {
        position: absolute;
    left: 50%;
    top:  50%;
}

#navigation {
overflow:hidden;
position:relative;
left:-450px;
top:-110px;
z-index:1100;
width: 190px; 
height:400px;
float: left; 
margin-top: 10px; 

font-family: verdana, Helvetica, sans-serif;
font-size: 9pt;
color:#EFFFFE;

}



#navigation ul {
width: 120px;
margin:0px; 
padding:0px; 
background: rgb(33, 59, 56); /* The Fallback */
/*background: rgba(33, 59, 56, 0.65);  */
/*border:#fff solid;
border-width:1px;   */
}

#navigation ul li {
width: 110px;
height:18px;
line-height:18px;
list-style:none;
padding-left:10px;
text-decoration:none ;
color:#EFFFFE;
/* 
border-top:#fff solid;
border-bottom:#fff solid;
*/
border-width:1px;
cursor:pointer;
}  
#navigation ul li a{
text-decoration:none ;
color:#EFFFFE;
}
#navigation ul li:hover {text-decoration:underline;backgroundcolor:#213b38;position:relative;}
#navigation ul li a:hover {text-decoration:underline;}

#navigation ul ul {
display:none;
position:absolute;
left:50px;
top:12px;
width: 140px;
z-index: 2100;

background: rgb(33, 59, 56); /* opaque  */
/* background: rgba(33, 59, 56, 0);*/

}

#navigation ul li:hover ul {display:block;} 
#navigation ul li ul li {white-space:nowrap;text-decoration:none ;}     
#navigation ul ul li a:hover {text-decoration:underline; border:none;}

</style>
<!--[if IE ]>
<style type="text/css">
#navigation ul   {
   background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#75213b38,endColorstr=#7521    3b38);
   zoom: 1; 
} 
</style>
<![endif]-->

</head>
<body>
<div id="centreer">

<div id="navigation">
<ul>
<li><a href="test.htm"> menuchoise 1 </a></li>
<li><a href="test.htm"> menuchoise 2 </a></li>
<li> menuchoise 3
<ul>
<li><a href="test.htm"> submenu 3 choise 1 </a></li>
<li><a href="test.htm"> submenu 3 choise 2 </a></li>
<li><a href="test.htm"> submenu 3 choise 3 </a></li>
<li><a href="test.htm"> submenu 3 choise 4 </a></li>
</ul>
</li>
<li><a href="index.htm"> menuchoise 4 </a></li> 
<li> menuchoise 5
<ul>
<li><a href="test.htm"> submenu 5 choise 1 </a></li>
<li><a href="test.htm"> submenu 5 choise 2 </a></li>
</ul>
</li>
<li><a href="index.htm"> menuchoise 6 </a></li> 
</li>


</ul>

</div>
</div>

</body>
</html>

1 Ответ

0 голосов
/ 05 июня 2012

Должен ли это быть переходный тип документа? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Образец отлично работает, когда я использую Strict или тип документа HTML5.

...