A problem with a menu (incorrect size)

HTML & CSS
1

Hi,

Please, go to Examples->PHP http://jsfiddle.net/4cA8G/1/

Error here: jQuery >

Thank you

2

Hi,

That’s a weird menu and hard to debug on fiddle with all the ui-css being applied as well.

The problem with that menu is that the width of the submenus will only be as wide as the main list item that holds it and so you get the lines dropping when there is not enough room. An easier option would be to set fixed widths for the drop down menus and gain some uniformity. If you want variable widths dependent on content they you probably have to force the issue with white-space:nowrap to force the elements wide.

You can probably fix the “jquery >” item problem by not floating the caret.

e.g.


.ui-menu .ui-menu-icon {
    float: none;
    left: auto;
    position: absolute;
    right: 0;
    top: 4px;
}
.ui-menu  a {padding-right: 1em !important;position:static!important;}

However that won’t address the underlying problems of that menu.

I also don’t like the way you obscure the next item on the top level menu which means you can’t traverse that top section easily. The submenu should show underneath the top item and not to the side of it.