Customized Drop Down jQuery Menu CSS2


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



Copy this code and paste it in your HTML
  1. /*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
  2. .sf-navbar {
  3. background: transparent;
  4. height: 2em;
  5. position: relative;
  6. }
  7. .sf-navbar li {
  8. background: transparent;
  9. position: static;
  10. }
  11. .sf-navbar a {
  12. border-top: none;
  13. font-size: 0.9em;
  14. }
  15. .sf-navbar li ul {
  16. _width: 80em; /* critical for ie6 functionality*/
  17. }
  18. .sf-navbar li li {
  19. background: transparent;
  20. position: relative;
  21. }
  22. .sf-navbar li li ul {
  23. background: #0971a6;
  24. width: 15em;
  25. }
  26. .sf-navbar li li li {
  27. width: 100%;
  28. }
  29. .sf-navbar ul li {
  30. width: auto;
  31. float: left;
  32. }
  33. .sf-navbar a, .sf-navbar a:visited {
  34. border: none;
  35. color: #fff;
  36. }
  37.  
  38. .sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active, .sf-navbar a.active {
  39. border: none;
  40. background: transparent;
  41. color: #ffbe40;
  42. }
  43.  
  44. .sf-navbar li.current {
  45. background: transparent;
  46. color: #ffbe40;
  47. }
  48.  
  49. .sf-navbar li:hover,
  50. .sf-navbar li.sfHover,
  51. .sf-navbar li li.current{
  52. background: transparent;
  53. color: #ffbe40;
  54. font-size: 1em;
  55. }
  56. .sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active, .sf-navbar a.current { font-family:Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; color:#ffbe40;} {
  57. background: transparent;
  58. color: #ffbe40;
  59. /*font-size: .8em;*/
  60. }
  61.  
  62. .sf-navbar ul li:hover,
  63. .sf-navbar ul li.sfHover,
  64. ul.sf-navbar ul li:hover li,
  65. ul.sf-navbar ul li.sfHover li{
  66. background: transparent;
  67. color: #ffbe40;
  68. font-size: 1em;
  69. }
  70.  
  71. ul.sf-navbar ul li a:active,
  72. .sf-navbar ul li a:active
  73. .sf-navbar ul li li a:active {
  74. color: #ffbe40;
  75. }
  76.  
  77. ul.sf-navbar li li li:hover,
  78. ul.sf-navbar li li li.sfHover,
  79. .sf-navbar li li.current li.current,
  80. .sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover {
  81. background: transparent;
  82. color: #ffbe40;
  83. }
  84. ul.sf-navbar .current ul,
  85. ul.sf-navbar ul li:hover ul,
  86. ul.sf-navbar ul li.sfHover ul {
  87. left: 0;
  88. top: 2em; /* match top ul list item height */
  89. }
  90. ul.sf-navbar .current ul ul {
  91. top: -999em;
  92. }
  93.  
  94. .sf-navbar li li.current > a {
  95. font-weight: bold;
  96. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.