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. }

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

  11. #menu .ui-menu {
  12.   width : 200px;
  13. }

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

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

  16. $(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