Jquery (1.10.1) menu overlay

Question

Here is my problem in a short form: I want to have split-buttons with a menu inside (done with jquery-ui see: jqueryui-demo, which do not affect the positioning of anything else. So the second button should not move at all, if the first split-button shows it's menu, as visibly wrong in the jsfiddle. I know it would be possible to change the position attribute within the css to absolute, but I really don't want to calculate each position (and recalculate it if something changes or the document.size() changes...

Is there some way to tell jquery.menu that it should overlay my menu?

The jsfiddle boils down to the following:

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

Since I solved my problem this morning and I wanted to document the solution for everyone else, I'm answering my own question.

If you define the <ul> as <ul style='position: absolute; z-index=1'> you get the desired behaviour.

See: http://jsfiddle.net/crapman/VUBqK/7/ or