jQuery icons do not center on buttons inside jQuery menu

[crowcoder]

Inside a jQueryUI menu, icons (ui-icon-trash, ui-icon-disk, etc.) do not center on buttons. They are stuck in the top left corner. The same code, outside of the menu, behaves appropriately. I can edit jquery-ui.css to fix it by removing "top" and "left" from ui-menu ui-icon.

my jsbin: ​http://jsbin.com/welcome/37845/edit

[Scott González]

Why are you putting buttons inside menus?

[crowcoder]

Replying to scott.gonzalez:

Why are you putting buttons inside menus?

My intent was to have a little form (not literally <form>, just inputs and buttons) inside each menu item. Basically I need to list a bunch of lookup tables and allow CRUD on them. I thought the Menu with top alignment would be easier than showing/hiding divs, and better UI than modal dialogs or separate pages. I realize it is not the anticipated use of Menu.

[Scott González]

This doesn't seem like a good use for menu. Do you have examples of other existing menus that function this way?

[crowcoder]

Replying to scott.gonzalez:

This doesn't seem like a good use for menu. Do you have examples of other existing menus that function this way?

I do not. This is my own brilliant idea. It all went well except for the icon alignment. But it sounds like I should just do it a different way.

[Scott González]

I would assume you can fix this with a bit of CSS, but it doesn't sound like a good idea.