一個隱藏的菜單完全採用CSS

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

菜單工作在 IE5.5, IE6, IE7, Firefox, Opera, Netscape 8 and 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）。

最終效果
來自：www.forest53.com