（翻譯）A hidden tab menu–完全採用CSS

作者網站：http://www.cssplay.co.uk

一個簡單、隱藏的菜單，初始時只有一個指示用的功能表標籤，
當滑鼠移動到功能表標籤上時顯示出完整的菜單。Javascript有許多版本,
但很少有CSS的版本，我認為到目前為止這個菜單是唯一的.

菜單工作在 IE5.5, IE6, IE7, Firefox, Opera, Netscape 8 a
nd Mac Firefox 1.5 and Safari ，不能工作在 Mac IE5.x.

它也可以做成多級展開菜單.

階層式樣式表

加正常的樣式表（非IE）

<link rel="stylesheet" media="all" type="text/css" href="css/hidden.css"   />

The hidden.css file

用條件判斷語句為IE加入樣式表

<!--[if lte IE 6]>
<link rel="stylesheet" media="all"   type="text/css" href="css/hidden_ie.css" /> 
<![endif]-->

The hidden_ie.css file

XHTML

<div class="menu"><ul>  <li><a class="drop" href="../menu/index.html">MENU  <!--[if IE 7]><!-->  </a>  <!--<![endif]--><table><tr><td> <ul>  <li><a href="../menu/zero_dollars.html">zero dollars advertising page</a></li>  <li><a href="../menu/embed.html">wrapping text around images</a></li>  <li><a href="../menu/form.html">styled form</a></li>  <li><a href="../menu/nodots.html">active focus</a></li>  <li><a href="../menu/shadow_boxing.html">shadow boxing</a></li>  <li><a href="../menu/old_master.html">image map for detailed information</a></li>  <li><a href="../menu/bodies.html">fun with background images</a></li>  <li><a href="../menu/fade_scroll.html">fade scrolling</a></li>  <li><a href="../menu/em_images.html">em image sizes compared</a></li>  </ul></td></tr></table>><!--[if lte IE 6]>  </a>  <![endif]--></li>  </ul></div>

你可以在上面代碼中看到使用條件注釋， 為IE的特定版本巢狀表格格. 其他瀏覽器不會看到表格，
而將正常使用無序列表，請記住，須使用符合標準的文件類型（DOCTYPE）。

最終效果