Author's website: http://www.cssplay.co.uk
For a simple and hidden menu, there is only one menu label for the indication at the beginning,
When you move the cursor over the menu label, the complete menu is displayed. Javascript has many versions,
But few CSS versions are available. I think this menu is unique so far.
Menu work in ie5.5, IE6, IE7, Firefox, opera, Netscape 8
Nd Mac Firefox 1.5 and Safari, 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 canCodeAnd nested tables for a specific version of IE. other browsers will not see the tables,
But the list will be normally used unordered. Remember to use a standard document type (doctype ).
Final Effect