CSS Drop Down Navigation


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



Copy this code and paste it in your HTML
  1. /* ----------| Navigation |---------- */
  2.  
  3. #navigation ul#nav {
  4. z-index: 4000;
  5. background: #14735d url(../images/tab-bg.gif) repeat-x left top;
  6. list-style: none;
  7. }
  8.  
  9. #navigation ul#nav li {
  10. position: relative;
  11. float: left;
  12. text-align: center;
  13. line-height: 1em;
  14. list-style: none;
  15.  
  16. }
  17.  
  18. #navigation ul#nav li a {
  19. display: block;
  20. padding: 12px 0;
  21. color: #fff;
  22. text-decoration: none;
  23. text-align: left;
  24. border-right: 1px solid #009290;
  25. font-size: 13px;
  26. text-align: center;
  27. font-family: "Trebuchet MS",Arial,sans-serif;
  28. }
  29.  
  30. #navigation ul#nav li a span {
  31. padding: 0 15px 0 10px;
  32. }
  33.  
  34. #navigation .item1 { width: 90px; }
  35. #navigation .item2 { width: 137px; }
  36. #navigation .item3 { width: 171px; }
  37. #navigation .item4 { width: 147px; }
  38. #navigation .item5 { width: 125px; }
  39. #navigation .item6 { width: 106px; }
  40. #navigation .item7 { width: 93px; }
  41.  
  42. /* ----------| Navigation (Drop Down) |---------- */
  43.  
  44. #navigation ul#nav li ul {
  45. display: block;
  46. position: absolute;
  47. left: -999em;
  48. width: 162px;
  49. padding: 3px 8px 3px 8px;
  50. background: #199985 url(../images/sub-bg.gif) repeat-x left top;
  51. border-bottom: 5px solid #009290;
  52. }
  53.  
  54. #navigation ul#nav li:hover ul,
  55. #navigation ul#nav li.over ul /* used to target IE via script */ {
  56. display: block;
  57. left: 0;
  58. top: 100%;
  59. position: absolute;
  60. z-index: 3000;
  61. width: 146px;
  62. }
  63.  
  64. #navigation ul#nav li ul li {
  65. width: 146px;
  66. height: auto;
  67. background: transparent;
  68. text-indent: 0;
  69. padding: 0;
  70. }
  71.  
  72. #navigation ul#nav li:hover ul li a,
  73. #navigation ul#nav li.over ul li a {
  74. display: block;
  75. width: 126px;
  76. background: transparent;
  77. padding: 7px 10px;
  78. text-decoration: none;
  79. margin: 0;
  80. color: #eee;
  81. text-indent: 0;
  82. text-align: left;
  83. border: 0;
  84. font-size: 11px;
  85. white-space: nowrap;
  86. }
  87.  
  88. #navigation ul#nav li ul li a:hover {
  89. color: #fff;
  90. background-color: #66bebc;
  91. }
  92.  
  93. #navigation ul#nav li.active a,
  94. #navigation ul#nav li a:hover,
  95. #navigation ul#nav li:hover a,
  96. #navigation ul#nav li.over a {
  97. background: #009290;
  98. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.