Jquery меню (1.10.1) наложение

Question

Вот моя проблема в короткой форме: Я хочу иметь сплит-кнопку с меню внутри (сделано с JQuery-Ui Престолом: jqueryui-demo, которые делают не влияют на позиционирование ничего другого. Таким образом, вторая кнопка не должна перемещаться вообще, если первая сплит-кнопка показывает ее меню, как это явно неправильно в jsfiddle. Я знаю, что было бы возможно изменить атрибут position внутри css на абсолютный, но Я действительно не хочу вычислять каждую позицию (и пересчитывать ее, если что-то меняется или изменяется документ document.size() ...

Есть ли способ сказать jquery.menu, что он должен накладывать мое меню?

jsfiddle сводится к следующему:

JavaScript

$(function() { 
    $.each($(".key"), convert); 

}); 

function convert(index, element) { 
    //retrieve button-value 
    var key = $(element).text(); 
    //exchange elements html with the split-button and the menu 
    $(element).html(
     '<div><div><button class="KeywordTag">' + key + '</button> 
      <button class="selectButton">Options</button></div> 
      <ul> 
      <li><a href="#" class="addtoquery">Add to Query</a></li> 
      <li><a href="#" class="opentab">Open in new Tab</a></li> 
      <li><a href="#" class="addtoquerytab">Add to Query in new Tab</a></li> 
      </ul></div>'); 
    //call jquery.button(...) to turn the buttons into good looking buttons the the 
    //unordered list into a menu 
    //... 
    //add event handling 
    //... 
    } 

CSS

//for round borders... 
//I'd probably need to change the position attribute, but I really don't want to 
//have to calculate each position by hand... 
.KeywordTag { 
    -moz-border-topleft-radius: 75px; 
    -moz-border-bottomleft-radius: 75px; 
    -webkit-border-topleft-radius: 75px; 
    -webkit-border-bottomleft-radius: 75px; 
    border-bottom-left-radius:75px; 
    border-top-left-radius:75px; 
} 
.selectButton { 
    -moz-border-topright-radius: 75px; 
    -moz-border-bottomright-radius: 75px; 
    -webkit-border-topright-radius: 75px; 
    -webkit-border-bottomright-radius: 75px; 
    border-bottom-right-radius:75px; 
    border-top-right-radius:75px; 
} 

HTML

<!-- Those spans will be exchanged with 
    the actual buttons and menus by the javascript above --> 
<span class="key">examplekey</span> 
<span class="key">examplekey2</span> 

Answer 1

Поскольку я решил проблему сегодня утром, и я хотел документировать решение для всех остальных, я отвечаю на свой вопрос.

Если вы определяете <ul> как <ul style='position: absolute; z-index=1'>, вы получите желаемое поведение.

См: http://jsfiddle.net/crapman/VUBqK/7/ или