Revision: 17663
Updated Code
at September 11, 2009 12:02 by chrisdpratt
Updated Code
<!--# HTML #--> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a><ul> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> </ul></li> <li><a href="#">Services</a><ul> <li><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> <li><a href="#">Service 3</a></li> </ul></li> <li><a href="#">Contact</a></li> </ul> <!--# CSS #--> <style type="text/css"> #nav { list-style:none; } #nav li { float:left; } #nav ul { position:absolute; top:-999px; width:1px; height:1px; overflow:hidden; list-style:none; } #nav ul li { float:none; } #nav li:hover ul { top:auto; width:auto; height:auto; overflow:visible; } #nav a { display:block; padding:5px 10px; background:#ccc; color:#000; text-decoration:none; } #nav a:hover, #nav li:hover a { background:#666; color:#fff; } #nav ul a { background:#666; color:#fff; } #nav ul a:hover { background:#000; } </style> <!--[if lt IE 7]> <style type="text/css"> body { behavior:url(csshover3.htc); /* or equivalent */ } #nav li { display:inline; } #nav ul a { width:8em; /* resize as appropriate */ } </style> <![endif]-->
Revision: 17662
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at September 11, 2009 12:01 by chrisdpratt
Initial Code
<!--# HTML #--> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a><ul> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> </ul></li> <li><a href="#">Services</a><ul> <li><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> <li><a href="#">Service 3</a></li> </ul></li> <li><a href="#">Contact</a></li> </ul> <!--# CSS #--> <style type="text/css"> #nav { list-style:none; } #nav li { float:left; } #nav ul { position:absolute; top:-999px; width:1px; height:1px; overflow:hidden; list-style:none; } #nav ul li { float:none; } #nav li:hover ul { top:auto; width:auto; height:auto; overflow:visible; } #nav a { display:block; padding:5px 10px; background:#ccc; color:#000; text-decoration:none; } #nav a:hover, #nav li:hover a { background:#666; color:#fff; } #nav ul a { background:#666; color:#fff; } #nav ul a:hover { background:#000; } </style> <!--[if lt IE 7]> <style type=text/css"> body { behavior:url(csshover3.htc); /* or equivalent */ } #nav li { display:inline; } #nav ul a { width:8em; /* resize as appropriate */ } </style> <![endif]-->
Initial URL
Initial Description
To make the menu work in IE6 (which doesn't support the :hover pseudo element on anything but links and tables), the IE6-specific CSS calls on [Whatever:hover][whatever]. If using [Dean Edwards' IE7-js][IE7-js], this is unnecessary as his script fixes li:hover behavior in IE6. [whatever]: http://www.xs4all.nl/~peterned/csshover.html "Whatever:hover" [IE7-js]: http://code.google.com/p/ie7-js/ "Dean Edwards' IE7-js"
Initial Title
Cross-Browser Pure CSS Dropdown Navigation
Initial Tags
css, navigation
Initial Language
CSS