與IE6/IE7兼容的菜單列表

我必須修改HTML頁面，因爲該菜單不適用於IE6/IE7/IE8。與IE6/IE7兼容的菜單列表

HTML代碼：

<div id="menu"> 
    <table> 
    <tr> 
     <td><a href="menu1.php">Menu 1</a></td> 

     <td>Menu 2 
       <ul> 
        <li><a href="submenu1-1.php">Sub-menu 1</a></li> 
        <li><a href="submenu1-2.php">Sub-menu 2</a></li> 
        <li><a href="submenu1-3.php">Sub-menu 3</a></li> 
       </ul> 
     </td> 

     <td><a href="menu3.php">Menu 3</a></td> 

     <td>Menu 4 
      <ul> 
        <li><a href="submenu3-1.php">Sub-menu 1</a></li> 
        <li><a href="submenu3-2.php">Sub-menu 2</a></li> 
        <li><a href="submenu3-3.php">Sub-menu 3</a></li> 
      </ul> 
     </td> 

     <td><a href="menu5.php">Menu 5</a></td> 

     <td>Menu 6 
       <ul> 
        <li><a href="submenu5-1.php">Sub-menu 1</a></li> 
        <li><a href="submenu5-2.php">Sub-menu 2</a></li> 
        <li><a href="submenu5-3.php">Sub-menu 3</a></li> 
       </ul> 
     </td> 

     <td><a href="disconnect.php">Menu 7</a></td> 

    </tr> 
    </table> 
</div>

CSS代碼：

#menu a, #menu li, #menu td{ 
    color: black; 
    text-decoration: none; 
} 

#menu a:hover{ 
    color: black; 
} 

#menu ul { 
    list-style-type: square; 
    text-align:left; 
} 

#menu table{ 
    width: 100%; 
    height:40px; 
} 

#menu td{ 
    border-right: 2px solid black; 
    padding-right:5px; 
} 

#menu td ul{ 
    position:absolute; 
    left: -999em; 
    margin-top:0px; 
    border: 2px outset black; 
    background: white; 
} 

#menu td:hover ul{ 

    left: auto; 
}

與 'TD' 和 'UL' 的語法似乎有點怪我。是否有任何提示可以恢復與舊版本的Microsoft瀏覽器的兼容性？

謝謝！

來源

2011-06-09 ti-pihug

爲什麼使用表？你爲什麼不告訴我們什麼是錯的？ '不工作'有點抽象。 – GolezTrol 2011-06-09 13:26:08

#menu td:hover ul將工作在IE7 +，如果您的頁面處於標準模式。

使你的頁面使用標準模式，加上適當的文檔類型爲第一行，如：

<!DOCTYPE html>

不幸的是，這不會解決IE6，因爲該版本只支持a:hover元素。

要解決IE6（和IE的其他版本，如果你不能添加文檔類型和你的頁面必須留在Quirks模式），你應該使用這個JavaScript修復：

http://peterned.home.xs4all.nl/csshover.html

大多數現代瀏覽器都支持：用於任何html元素的懸停選擇器。這很酷，因爲它使您能夠將應用於僅使用 CSS的表格行的鼠標懸停效果效果。然而，IE對於：懸停最多支持，具體取決於您的訪問者正在使用的特定版本上的。

不管：懸停是一個小的腳本，自動補丁：懸停：活躍和：重點IE6，IE7和IE8 怪癖，讓您使用他們喜歡你會在任何其他瀏覽器。

來源

2011-06-09 13:30:27 thirtydot

謝謝！你的指示非常清楚。 :-) – 2011-06-09 14:09:58

與IE6/IE7兼容的菜單列表

回答

相關問題