Advanced Search

Clagnut CSS Tabs

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. HTML
  2. <div id="navcontainer">
  3. <ul id="navlist">
  4. <li id="active"><a href="#" id="current">Item one</a></li>
  5. <li><a href="#">Item two</a></li>
  6. <li><a href="#">Item three</a></li>
  7. <li><a href="#">Item four</a></li>
  8. <li><a href="#">Item five</a></li>
  9. </ul>
  10. </div>
  11.  
  12. CSS
  13. #navcontainer
  14. {
  15. margin: 0;
  16. padding: 0 0 0 12px;
  17. }
  18.  
  19. #navcontainer UL
  20. {
  21. list-style: none;
  22. margin: 0;
  23. padding: 0;
  24. border: none;
  25. }
  26.  
  27. #navcontainer LI
  28. {
  29. display: block;
  30. margin: 0;
  31. padding: 0;
  32. float: left;
  33. width: auto;
  34. }
  35.  
  36. #navcontainer A
  37. {
  38. color: #444;
  39. display: block;
  40. width: auto;
  41. text-decoration: none;
  42. background: #DDDDDD;
  43. margin: 0;
  44. padding: 2px 10px;
  45. border-left: 1px solid #fff;
  46. border-top: 1px solid #fff;
  47. border-right: 1px solid #aaa;
  48. }
  49.  
  50. #navcontainer A:hover, #navcontainer A:active { background: #BBBBBB; }
  51.  
  52. #navcontainer A.active:link, #navcontainer A.active:visited
  53. {
  54. position: relative;
  55. z-index: 102;
  56. background: #BBBBBB;
  57. font-weight: bold;
  58. }
  59.  
  60. #subnav
  61. {
  62. position: relative;
  63. top: -1px;
  64. z-index: 101;
  65. margin: 0;
  66. padding: 0px 0 3px 0;
  67. background: #BBBBBB;
  68. border-top: 1px solid #fff;
  69. border-bottom: 1px solid #aaa;
  70. }
  71.  
  72. #subnav UL
  73. {
  74. list-style: none;
  75. margin: 1px 0 0px 13px;
  76. padding: 0px;
  77. border-right: 1px solid #fff;
  78. border-left: 1px solid #aaa;
  79. }
  80.  
  81. #subnav LI
  82. {
  83. position: relative;
  84. z-index: 102;
  85. display: block;
  86. margin: 0;
  87. padding: 0;
  88. float: left;
  89. width: auto;
  90. }
  91.  
  92. #subnav A
  93. {
  94. color: #fff;
  95. display: block;
  96. width: auto;
  97. text-decoration: none;
  98. margin: 0;
  99. padding: 2px 12px 2px 10px;
  100. }
  101.  
  102. #subnav A:hover, #subnav A:active { color: #444; }
  103. #subnav A.active:link, #subnav A.active:visited { color: #444; }
  104. #subnav BR, #navcontainer BR { clear: both; }

URL: http://css.maxdesign.com.au/listamatic/horizontal10.htm

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.