相容i6的三級選單（不閃的）
阿新 • • 發佈：2018-12-23
用jquery寫在ie6下出現閃動現象，也嘗試了別的方法，這個方法雖然html多一些，但是真的不閃了，以下是完整的程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定義過渡型DOCTYPE--> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"><!--定義名字空間--> <head> <title>網頁佈局+純CSS三級滑鼠懸停顯示/隱藏選單</title><!--標題欄--> <meta charset="utf-8"/> <meta content="all" name="robots" /><!--允許搜尋機器人--> <meta name="author" content="" /><!--作者資訊--> <meta name="Copyright" content=",共同探討,允許轉載" /><!--版權資訊--> <meta name="description" content="下拉選單,CSS,佈局" /><!--簡介--> <meta content="下拉,選單,CSS,佈局" name="keywords" /><!--關鍵詞--> <style type=text/css> * { margin: 0; padding: 0; border: 0; } html { background: #bfc4c7; /*背景顏色*/ } body { font: 12px/150% '宋體'; margin: 0 auto; width: 770px; text-align: center; } /*menu部分*/ #menu { margin: 0 auto; width: 770px !important; clear: both } #menu ul { list-style: none; } #menu table { position: absolute; left: 0; top: 0; } li.l1-nav { position: relative; width: 77px; } a.l1-nav { display: block; text-align: center; text-decoration: none; width: 77px; height: 30px; line-height: 30px; color: #000; background: #c9c9a7; } li.l1-nav:hover a.l1-nav, a.l1-nav:hover { color: #fff; background: #b3ab79; } ul.l2-nav { visibility: hidden; position: absolute; /* 第二級選單相對於第一級選單絕對定位 */ left: 77px; top: 0px; } li.l2-nav { position: relative; /* 這裡把第二級選單項設成相對定位，以使得它包含的三級選單相對它自己定位 */ left: 0px; top: 0px; } a.l2-nav { display: block; /* 把a設成塊級顯示 */ text-align: center; text-decoration: none; width: 77px; height: 30px; line-height: 30px; color: #000; background: #faeec7; } li.l2-nav:hover a.l2-nav, a.l2-nav:hover { color: #fff; background: #dfc184; } ul.l3-nav { visibility: hidden; position: absolute; left: 77px; top: 0px; } /* 這是控制選單顯示與隱藏的重點 */ a.l1-nav:hover ul.l2-nav, li.l1-nav:hover ul.l2-nav, a.l2-nav:hover ul.l3-nav, li.l2-nav:hover ul.l3-nav { visibility: visible; } a.l3-nav { display: block; width: 77px; height: 30px; line-height: 30px; background: red; color: #000; text-decoration: none; } a.l3-nav:hover { background: blue; color: #000; } </style> </head> <body> <div id="menu"> <ul class="l1-nav"> <li class="l1-nav"> <!-- IE6裡面a元素可以包含其他元素，且只有a能夠支援hover偽類，但ul還要放在一個table中。而chrome中，a不可以包含其他元素，但li支援hover偽類。所以這一段有些繞。 --> <a class="l1-nav" href="">第一分類 <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l2-nav"> <li class="l2-nav"> <a class="l2-nav" href="">XHTML <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">XHTML1</a></li> <li><a class="l3-nav" href="">XHTML2</a></li> <li><a class="l3-nav" href="">XHTML3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">CSS <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">CSS1</a></li> <li><a class="l3-nav" href="">CSS2</a></li> <li><a class="l3-nav" href="">CSS3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">PHP <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">PHP1</a></li> <li><a class="l3-nav" href="">PHP2</a></li> <li><a class="l3-nav" href="">PHP3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">MySQL <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">MySQL1</a></li> <li><a class="l3-nav" href="">MySQL2</a></li> <li><a class="l3-nav" href="">MySQL3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Fireworks <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Fireworks1</a></li> <li><a class="l3-nav" href="">Fireworks2</a></li> <li><a class="l3-nav" href="">Fireworks3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Photoshop <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Photoshop1</a></li> <li><a class="l3-nav" href="">Photoshop2</a></li> <li><a class="l3-nav" href="">Photoshop3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Flash <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Flash1</a></li> <li><a class="l3-nav" href="">Flash2</a></li> <li><a class="l3-nav" href="">Flash3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l1-nav"> <a class="l1-nav" href="">第二分類 <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l2-nav"> <li class="l2-nav"> <a class="l2-nav" href="">XHTML <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">XHTML1</a></li> <li><a class="l3-nav" href="">XHTML2</a></li> <li><a class="l3-nav" href="">XHTML3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">CSS <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">CSS1</a></li> <li><a class="l3-nav" href="">CSS2</a></li> <li><a class="l3-nav" href="">CSS3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">PHP <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">PHP1</a></li> <li><a class="l3-nav" href="">PHP2</a></li> <li><a class="l3-nav" href="">PHP3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">MySQL <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">MySQL1</a></li> <li><a class="l3-nav" href="">MySQL2</a></li> <li><a class="l3-nav" href="">MySQL3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Fireworks <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Fireworks1</a></li> <li><a class="l3-nav" href="">Fireworks2</a></li> <li><a class="l3-nav" href="">Fireworks3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Photoshop <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Photoshop1</a></li> <li><a class="l3-nav" href="">Photoshop2</a></li> <li><a class="l3-nav" href="">Photoshop3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Flash <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Flash1</a></li> <li><a class="l3-nav" href="">Flash2</a></li> <li><a class="l3-nav" href="">Flash3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> </ul> </div> </body><!--網頁主體結束--> </html>