Internet Explorer 9中的CSS垂直菜單問題

我試圖用純CSS構建一個垂直彈出式菜單。像這樣的：Internet Explorer 9中的CSS垂直菜單問題

http://devinrolsen.com/wp-content/uploads/2009/09/fig4.gif

一切都運行完美的FF，歌劇，鉻，但不是在Internet Explorer 9中，在那裏渡過了菜單項時，子級沒有顯示。訣竅在哪裏？

下面是完整的代碼：

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

<html> 
<head> 

<style type="text/css"> 
#navigation{font-size: 20px; width: 150px} 
#navigation ul{margin: 0px;padding: 0px;} 
#navigation li{list-style: none;} 
ul.top-level{background: #686868} 
ul.top-level.li{ 
border-style: solid; 
border-width: 2px;} 
#navigation a{ 
color: #ffffff; 
display: block; 
height: 25px; 
line-height: 25px; 
text-indent: 10px; 
text-decoration: none; 
width: 100% 
} 
#navigation a:hover {text-decoration: underline; background-color: #000000; position: relative;} 
#navigation li:hover {position: relative;} 

ul.sub-level {display: none} 
li:hover .sub-level{ 
background: #000000; 
display: block; 
width: 150px; 
position: absolute; 
left: 75px; 
top: 5px; 
} 

</style> 

</head> 
<body> 

    <div id="navigation"> 
     <ul class="top-level"> 
      <li><a href="#">Home</a> 
       <ul class="sub-level"> 
        <li><a href="#">Sub Menu Item 1</a></li> 
        <li><a href="#">Sub Menu Item 2</a></li> 
        <li><a href="#">Sub Menu Item 3</a></li> 
        <li><a href="#">Sub Menu Item 4</a></li> 
        <li><a href="#">Sub Menu Item 5</a></li> 
       </ul> 
      </li> 
     </ul>  
    </div> 

</body> 
</html>

來源

2012-08-11 Matti

它在IE9中的外觀如何？ – Diego 2012-08-11 18:37:06

子級菜單未顯示。 – Matti 2012-08-11 19:02:13

哦，我明白了。這個問題可以通過指定一個DocType來解決，IE9需要這個DocType。替換以下：

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

有：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

子菜單現在應該「神奇」的出現。

來源

2012-08-11 19:19:02 Diego

Internet Explorer 9中的CSS垂直菜單問題

回答

相關問題