iTg Sexy Dropdown menu using jQuery and CSS

Check above for the demo...

CSS Code

  1. /* Basic widths */
  2. #menu, #menu * {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. #menu {
  7.     width: 962px;
  8.     height: 40px;
  9.     font-family: 'Trebuchet MS', Helvetica, sans-serif;
  10.     font-size: 13px;
  11. }
  12.  
  13. /* Style the left and right extremes */
  14. #menu .menu_left {
  15.     float: left;
  16.     width: 2px;
  17.     background: url("images/menu-left.png") no-repeat scroll center;
  18.     height: 40px;
  19. }
  20. #menu .menu_right {
  21.     float: right;
  22.     width: 2px;
  23.     height: 40px;
  24.     background: url("images/menu-right.png") no-repeat scroll center;
  25. }
  26.  
  27. /* The main menu container */
  28. #menu .menu_content {
  29.     width: 958px;
  30.     margin: 0 2px;
  31.     background: url("images/menu-middle.png") repeat-x scroll center;
  32.     height: 40px;
  33. }
  34.  
  35. #menu .menu_content ul {
  36.     list-style: none;
  37.     height: 40px;
  38.     padding: 0;
  39. }
  40.  
  41. /* The list styles - 0 tier */
  42. #menu .menu_content ul li {
  43.     list-style: none;
  44.     width: 118px;
  45.     float: left;
  46.     height: 36px;
  47.     padding: 2px 2px 2px 0;
  48.     background: url("images/menu-separator.png") no-repeat scroll right center;
  49.     position: relative;
  50. }
  51. #menu .menu_content ul li.last {
  52.     padding-right: 0;
  53.     background: none;
  54. }
  55. #menu .menu_content ul li, #menu .menu_content ul li a {
  56.     display: block;
  57.     font-size: 15px;
  58.     text-align: center;
  59.     text-shadow: 1px 1px 0 #fff;
  60.     color: #000;
  61.     text-decoration: none;
  62.     letter-spacing: 1px;
  63.     line-height: 35px;
  64. }
  65. #menu .menu_content ul li:hover > a {
  66.     background: url("images/menu-hover.png") no-repeat scroll bottom center;
  67.     color: #fff;
  68.     text-shadow: 1px 1px 0 #000;
  69. }
  70.  
  71. /* 1 tier list style */
  72. #menu .menu_content ul li ul {
  73.     position: absolute;
  74.     width: 155px;
  75.     list-style: none;
  76.     float: left;
  77.     top: 40px;
  78.     left: 0;
  79.     display: none;
  80.     background: url("images/dropdown-middle.png") repeat-y scroll center;
  81.     height: auto;
  82. }
  83. #menu .menu_content ul li ul li {
  84.     padding: 0 10px 0 5px;
  85.     width: 140px;
  86.     float: left;
  87.     height: 30px;
  88.     background: url("images/dropdown-li.png") no-repeat scroll 5px center;
  89. }
  90. #menu .menu_content ul li ul li.endl, #menu .menu_content ul li ul li.endl:hover {
  91.     height: 10px;
  92.     margin-bottom: -10px;
  93.     background: url("images/dropdown-bottom.png") no-repeat scroll center;
  94. }
  95.  
  96. #menu .menu_content ul li ul li, #menu .menu_content ul li ul li a {
  97.     font-size: 13px;
  98.     text-align: left;
  99.     letter-spacing: normal;
  100.     color: #333;
  101.     text-shadow: 0 1px 0 #fff;
  102.     line-height: 30px;
  103. }
  104. #menu .menu_content ul li ul li a {
  105.     padding: 0 0 0 15px;
  106. }
  107. #menu .menu_content ul li ul li, #menu .menu_content ul li:hover > ul {
  108.     display: block;
  109. }
  110. #menu .menu_content ul li ul li:hover {
  111.     background: url("images/dropdown-lihover.png") no-repeat scroll 5px center;
  112. }
  113. #menu .menu_content ul li ul li a:hover, #menu .menu_content ul li ul li:hover > a {
  114.     background: none;
  115. }

jQuery Code

  1. $(document).ready(function() {
  2.     $("#menu ul li").hover(function() {
  3.         $(this).find("ul").stop(true, true).hide().slideDown(200);
  4.     }, function() {
  5.         $(this).find("ul").stop(true, true).show().slideUp(400);
  6.     });
  7. });

Image files