Advanced Search

CSS Horizontal Navigation

/ Published in: CSS
Save to your folder(s)
This is PURE CSS. Tested in IE7+, Chrome, Firefox, Safari and Opera

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Horizontal Main Nav
  2. ----------------------------------------------------------------------------------------------------*/
  3. div#mainnav {
  4. 	position:relative;
  5. 	z-index:100;
  6. 	padding: 0px 0 0 0px;
  7. }
  8.  
  9. div#mainnav ul {
  10. 	padding: 0px;
  11. 	margin: 0px;
  12. 	list-style-type:none;
  13. }
  14.  
  15. div#mainnav li {
  16. 	float:left;
  17. 	position:relative;
  18. 	margin: 0px;
  19. 	padding: 0px;
  20. 	list-style-type:none;
  21. }
  22.  
  23. /* style the links for the top level */
  24.  
  25. div#mainnav a {
  26. 	font-size: 12px;
  27. 	height: 19px;
  28. 	color: #1a1a1a;
  29. 	text-decoration: none;
  30. 	text-align:center;
  31. 	padding: 9px 12px;
  32. 	display: block;
  33. 	font-weight: bold;
  34. 	text-transform: uppercase;
  35. 	width: auto;
  36. 	margin: 0;
  37. }
  38.  
  39. /* Style the first navigation button */
  40. div#mainnav li:first-child a { }
  41.  
  42. div#mainnav ul li a.current { background-color:#000; }
  43.  
  44. div#mainnav a:hover,
  45. div#mainnav ul li:hover {
  46. 	color: #FFCC00;
  47. 	background: #354356;
  48. }
  49.  
  50. /* Drop Down CSS
  51. ----------------------------------------------------------------------------------------------------*/
  52. div#mainnav ul ul {
  53. 	visibility:hidden;
  54. 	position:absolute;
  55. 	height: 0;
  56. 	top: 41px;
  57. 	left:0;
  58. 	z-index: 98
  59. }
  60.  
  61. /* style the second level links */
  62. div#mainnav ul ul a,
  63. div#mainnav ul ul a:visited {
  64. 	background:#4c637e;
  65. 	color:#fff;
  66. 	height:auto;
  67. 	padding: 12px 5px;
  68. 	width: 200px;
  69. 	border-width:0 1px 1px 1px;
  70. }
  71.  
  72. /* Style the first drop down navigation button */
  73. div#mainnav ul ul li:first-child a {  }
  74.  
  75. div#mainnav ul ul a:hover,
  76. div#mainnav:hover > a,
  77. div#mainnav ul ul:hover > a {
  78. 	color: #FFCC00;
  79. 	background: #354356;
  80. }
  81.  
  82. /* style the third level background */
  83. div#mainnav ul ul ul {
  84. 	left: 211px;
  85. 	top: 0px;
  86. 	width:129px;
  87. 	position: absolute;
  88. 	z-index: 99
  89. }
  90.  
  91. div#mainnav ul ul ul a,
  92. div#mainnav ul ul ul a:visited {
  93. 	background:#FFCC00;
  94. 	color: #000;
  95. }
  96.  
  97. /* Style the first drop down navigation button of a drop down */
  98. div#mainnav ul ul ul li:first-child a {  }
  99.  
  100. div#mainnav ul ul ul a:hover {
  101. 	color: #FFCC00;
  102. 	background: #354356;
  103. }
  104.  
  105. /* style the table so that it takes no part in the layout - required for IE to work */
  106. div#mainnav table {
  107. 	position:absolute;
  108. 	top:0;
  109. 	left:0;
  110. 	border-collapse:collapse;
  111. }
  112.  
  113. /* make the second level visible when hover on first level list OR link */
  114. div#mainnav ul li:hover ul,
  115. div#mainnav ul a:hover ul { visibility:visible; }
  116.  
  117. /* keep the third level hidden when you hover on first level list OR link */
  118. div#mainnav ul:hover ul ul { visibility:hidden; }
  119.  
  120. /* make the third level visible when you hover over second level list OR link */
  121. div#mainnav ul:hover ul :hover ul { visibility:visible; }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.