This page has some divs that jQuery makes into menus.
Here is the jsfiddle.
<div class="span-24 last">
<div class="span-5 last menu_button">
<ul id="item_menu" class="ui-menu">
<li class="ui-menu-item"><a href="#">Select Item Here</a>
<ul id="item_menu_list" class="ui-menu" style="display:block; position:relative;"></ul>
</li>
</ul>
</div>
With these parameters:
$( "#item_menu" ).menu("collapseAll", null, true );
The menus are cleared and reset:
$('#item_menu').html("");
$('#item_menu').append("<li class=\"ui-menu-item\"><a href=\"#\">Item Menu</a><ul id=\"item_menu_list\" class=\"ui-menu\" style=\"display:block; position:relative;\"></ul></li>");
then populated through a series of calls like this:
$('#item_menu_list').append("<li class=\"ui-menu-item\"><a class=\"ui-corner-all\" id=\"item_menu_list_item1\" href=\"#item1\">Item 1</a></li>");
.menu_button
has the following .css:
div
{
color:#3079D9;
/* background:#4334ff; */
border-image-width:0px;
}
#menu
{
height:32px;
/* background:#00ccff; */
padding-top:10px;
padding-bottom:10px;
border-bottom: 1px solid #3079D9;
position: relative;
z-index:5000;
}
#menu div
{
position: relative;
vertical-align:middle;
z-index: inherit;
}
.menu_button {
/* padding:10px; */
position: relative;
vertical-align:middle;
/*z-index: inherit;*/
margin-top:0px;
color:#F2F2F2;
background: #5A86BF;
text-align:center;
border: 1px solid #3079D9;
border-image-width:0px;
}
The rest of the .css is drawn from Blueprints css or the jQuery-ui css.
I am using v.1.10.3 of the jQuery UI, and v1.10.2 of jQuery.
Whenever I mouse over the dropdown menus, a white space drops down, just like it should, but the text for the menu-items appears a full menu's-width to the right of the menu. Until a few days ago it was working just like it should. But when I switched from jQuery v.1.9.1 because my jQuery tooltips weren't working, my menus broke. Does anyone have any idea what's making this happen?
Let me know if you need any other information.