Re-usable dropdown list when clicking various elements, what's the technique?

Say I have various parts of a page, that when clicked, should display a dropdown list below the link I just clicked on.

Since this drop down is the exact same, I n开发者_如何学编程oticed that some sites do this, where they have a single drop down list defined in the DOM, and when clicked, it somehow gets displayed below where they clicked.

What's the technique to do this?

Would it be to have a empty div below all the parts of my site where I want to inject the drop down, then when clicked, copy the div that contains the drop down list elements to the element that was just clicked? Or is there a smarter way?

I would also like to see these sites...

However if you'd like to accomplish what you've described I would advise against a bunch of empty divs. Maybe something along these lines: jsFiddle

A select box which is initially hidden, that you show on click. Of course you still have a get rid of it if they decide not to use it, but at least it's not in the flow, and isn't repeating itself.

$('a').click(function(){
    var offset = $(this).offset();
    offset.top += 20;
    $('#ghost').show().offset(offset);
});