（翻译）A hidden tab menu--完全采用CSS_hidden bodies译本-优快云博客

（翻译）A hidden tab menu--完全采用CSS

作者简介：

Stu Nicholls　59岁，已婚，有两个孩子，日常工作为电子设计，热爱计算机、摄影。

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

一个简单、隐藏的菜单，初始时只有一个指示用的菜单标签，当鼠标移动到菜单标签上时显示出完整的菜单。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>