一个隐藏的菜单完全采用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