Posted By

officiallyWise on 08/26/11


Tagged

css navigation horizontal first-child


Versions (?)

CSS Horizontal Navigation


 / Published in: CSS
 

This is PURE CSS. Tested in IE7+, Chrome, Firefox, Safari and Opera

  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  

You need to login to post a comment.