A hidden menu uses CSS.

For a simple and hidden menu, there is only one menu label for the indicator at first. When you move the mouse over the menu label, the complete menu is displayed. Javascript has many versions, but few have CSS versions. So far, I think this menu is unique.

The menu works in ie5.5, IE6, IE7, Firefox, opera, Netscape 8 and Mac Firefox 1.5 and Safari, and cannot work in MAC ie5.x.

It can also be made into a multi-level expanded menu.

Cascading Style Sheets

Add a normal style sheet (non-ie)

<LINK rel = "stylesheet" Media = "all" type = "text/CSS" href = "CSS/hidden.css"/>

The hidden.css File

Add the style sheet to IE with the condition judgment statement

<!--[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>

You can see in the code above that the conditional annotation is used to nest tables of a specific version of IE. other browsers will not see the table, but will normally use the unordered list. Remember to use a standard document type (doctype ).

Final Effect
From: www.forest53.com