jQuery Drop-down-menu Displaying Incorrectly

Question

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.

Answer 1

Modifications made to your fiddle

1. Added #item_menu_list { width:188px; } to your CSS - (To make your menu links the same size as the menu.. You can modify it as you see fit.)

2. Removed all the classes from your appended li elements. When the menu activates it automatically adds these classes for you. There were some conflicts which were causing your issue.

3. Removed the class and style attributes from your item_menu_list element. <ul id="item_menu_list"></ul> the classes and style and automatically added by menu just like your appended elements.

4. Added a position attribute to your menu. $('#item_menu').menu({ position: { my: "bottom", at: "right-95 top-3" } }); This lets you adjust where the menu opens I made it so that it opens right below but you can experiment with it. $('#item_menu').menu(); defaults to the menu opening to the right.

Here is the fiddle.

http://jsfiddle.net/QP4BC/31/

Hope this helps you out.

Answer 2

http://jsfiddle.net/2hxmB/1/ - it's your question in jsfiddle.net, maybe someone help you. I'm didn't understand objective.

html:

<div class="span-5 last menu_button"> <ul id="world_menu" class="ui-menu"> <li class="ui-menu-item"><a href="#">Select World Here</a> <ul id="world_menu_list" class="ui-menu" style="display:block; position:relative;"> </ul> </li> </ul> </div>

js:

$( "#world_menu" ).menu("collapseAll", null, true ); $( '#' + menuId ).append( "<li class=\"ui-menu-item\"><a href=\"#\">" + defaultValue + "</a><ul id=\"world_menu_list\" class=\"ui-menu\" style=\"display:block; position:relative;\"></ul></li>" );

css:

body{background-color: #999;} .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;}