How to make the perfect horizontal menu

How to make the perfect horizontal menu

Here's a simple way to make a menu like this:


CSS code:
  1. #menu {
  2.   overflow : hidden;
  3.   width : 500px;
  4. }

  5. #menu > li {
  6.   float : left;
  7.   width : 100px !important;
  8. }

  9. #menu .ui-menu {
  10.   width : 200px;
  11. }

JS code:
  1. var menu = "#menu";
  2. var position = {my: "left top", at: "left bottom"};

  3. $(menu).menu({
  4.     position: position,
  5.     blur: function() {
  6.         $(this).menu("option", "position", position);
  7.     },
  8.     focus: function(e, ui) {
  9.         if ($(menu).get(0) !== $(ui).get(0).item.parent().get(0)) {
  10.             $(this).menu("option", "position", {my: "left top", at: "right top"});
  11.         }
  12.     }
  13. });

  14. $(menu + " > li > a > span").switchClass("ui-icon-carat-1-e", "ui-icon-carat-1-s");

Feel free to use this code in any way. However, please write a reply if you have some improvements.

cu
Mr.Yeah