Cross-Browser Pure CSS Dropdown Navigation


/ Published in: CSS
Save to your folder(s)

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"


Copy this code and paste it in your HTML
  1. <!--# HTML #-->
  2.  
  3. <ul id="nav">
  4. <li><a href="#">Home</a></li>
  5.  
  6. <li><a href="#">About</a></li>
  7. <li><a href="#">Products</a><ul>
  8. <li><a href="#">Product 1</a></li>
  9. <li><a href="#">Product 2</a></li>
  10. <li><a href="#">Product 3</a></li>
  11. </ul></li>
  12.  
  13. <li><a href="#">Services</a><ul>
  14. <li><a href="#">Service 1</a></li>
  15. <li><a href="#">Service 2</a></li>
  16. <li><a href="#">Service 3</a></li>
  17. </ul></li>
  18. <li><a href="#">Contact</a></li>
  19.  
  20. </ul>
  21.  
  22. <!--# CSS #-->
  23.  
  24. <style type="text/css">
  25. #nav {
  26. list-style:none;
  27. }
  28. #nav li {
  29. float:left;
  30. }
  31. #nav ul {
  32. position:absolute;
  33. top:-999px;
  34. width:1px;
  35. height:1px;
  36. overflow:hidden;
  37. list-style:none;
  38. }
  39. #nav ul li {
  40. float:none;
  41. }
  42. #nav li:hover ul {
  43. top:auto;
  44. width:auto;
  45. height:auto;
  46. overflow:visible;
  47. }
  48. #nav a {
  49. display:block;
  50. padding:5px 10px;
  51. background:#ccc;
  52. color:#000;
  53. text-decoration:none;
  54. }
  55. #nav a:hover, #nav li:hover a {
  56. background:#666;
  57. color:#fff;
  58. }
  59. #nav ul a {
  60. background:#666;
  61. color:#fff;
  62. }
  63. #nav ul a:hover {
  64. background:#000;
  65. }
  66. </style>
  67.  
  68. <!--[if lt IE 7]>
  69. <style type="text/css">
  70. body {
  71. behavior:url(csshover3.htc); /* or equivalent */
  72. }
  73. #nav li {
  74. display:inline;
  75. }
  76. #nav ul a {
  77. width:8em; /* resize as appropriate */
  78. }
  79. </style>
  80. <![endif]-->

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.