Posted By

nielsenrc on 01/05/11


Tagged


Versions (?)

Horizontal Menu Css


 / Published in: CSS
 

  1. #menu {
  2. position: relative;
  3. width: 900px;
  4. height: 40px;
  5. margin: 0px;
  6. padding: 0px;
  7. top: 0px;
  8. left: 0px;
  9. background-image: url('/images/meu-7.png');
  10. background-repeat: no-repeat;
  11. z-index: 99;
  12. clear: left;
  13. }
  14. #menu-list-container {
  15. width: 100%;
  16. height: 28px;
  17. margin: 0;
  18. padding: 0;
  19. z-index: 99;
  20. }
  21. #menu-list-container ul {
  22. list-style: none;
  23. margin: 0px;
  24. margin-left: 30px;
  25. padding: 0px;
  26. color: #e5e8df;
  27. font-family: lucinda, Helvetica, Sans-Serif;
  28. font-size: 22px;
  29. z-index: 99;
  30. }
  31. #menu-list-container ul li {
  32. float: left;
  33. margin: 0;
  34. padding: 0;
  35. z-index: 99;
  36. }
  37. #menu-list-container li a {
  38. display: block;
  39. height: 28px;
  40. padding-left: 35px;
  41. padding-right: 35px;
  42. padding-top: 12px;
  43. float: left;
  44. font-size: 70%;
  45. color: #FFFFFF;
  46. text-decoration: none;
  47. text-align: center;
  48. z-index: 99;
  49. }
  50. #menu-list-container ul li a:hover {
  51. display: block;
  52. float: left;
  53. height: 28px;
  54. padding-left: 35px;
  55. padding-right: 35px;
  56. cursor: pointer;
  57. z-index: 99;
  58. background-image: url('/images/menu-active-bg2.png');
  59. background-repeat: repeat-x;
  60. }

Report this snippet  

You need to login to post a comment.