展開式選單 第二頁

使用 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>

• 。

展開式選單（你正在看 第二頁）

:

第一頁

第二頁