使用 ANCHOR 來作 展開式選單。由於在 IE6 中 :hover 只能用在 ANCHOR 元素，所以下面的範例使用了 註解條件式（Conditional Comment）在 IE6 瀏覽器中加上 ANCHOR 元素與 TABLE 元素，將子選單包起來，其它瀏覽器則不包夾。然後風格表中有兩個 :hover 條件 li:hover 與 a:hover，分別用在不同的瀏覽器。實測時，曾使用 display:none 取代 visibility:hidden，但是在 IE6 會出現殘影。
- 風格用法：
<style type="text/css">
.menu * {margin:0; padding;0}
.menu {position:relative;
z-index:10;
font-size:16px;
}
.menu ul {list-style:none;}
.menu li {float:left;
position:relative;
}
.menu ul ul
{visibility:hidden;
position:absolute;
top:24px;
}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul, .menu ul a:hover ul
{visibility:visible;}
.menu a {display:block;
background:red;
margin:4px;
}
.menu a:hover {border:1px solid white;}
.menu ul ul li {clear:both;}
.menu ul ul li a
{display:block;
width:120px;
margin:0;
}
</style>
<div class="menu">
<ul>
<li><a href="#">動作遊戲
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3953.html'>長劍客戰骷髏</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_2534.html'>坦克衝鋒戰</a>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">競速遊戲
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_3232.html'>摩托車飛峽谷</a>
<li><a href='http://gamelily.blogspot.com/2008/11/blog-post_430.html'>城市碰碰車</a>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div> - 執行結果：
- 。
| 展開式選單（你正在看 第二頁） | : | 第一頁 | 第二頁 |
