simple right click menu style dropdown list

simple right click menu style dropdown list

I am trying to setup a simple list popup drop down type menu .. like how may be facebook has the My Account link where you click on it and opens up like a drop down list with multiple options .. if you click on one of them or hover out .. it collapses and goes away .. what I have so far is 

HTML
<dl>
<dt>Actions</dt>
<dd>xxx</dd>
<dd>yyy</dd>
<dd>zzz</dd>
</dt>
</dl>


CSS
dl{ border: 1px solid #000; padding: 2px; width: 180px; cursor: pointer; }
dt{ margin: 0; padding: 0 0 0 2px; background: #ccc url('down.png') no-repeat -5 right; color: white; font-weight: bold; }
dd{ margin: 0; padding: 0 0 2px 5px; background-color: #f9f9f9; }


JAVASCRIPT
$(document).ready(function(){
$("dt").click(function(e){
var sibs = $(this).siblings().toggle();
$(this).parent().hover( function(){}, function(){ sibs.hide() });
});
$("dd").hide().hover(function( ){
$(this).css("backgroundColor", "#f2f2f2");
}, function(){
$(this).css("backgroundColor", "#f9f9f9");
}).click(function(e){
$("#action").html($(this). text());
});
});

what this does is shows only the dt tag .. with all dd's hidden .. when you click on dt .. it shows the dd's underneath that as a drop down list options .. and if you hover out of the dl .. it hides the dd's again .. 
so all this works fine .. the part where I am having trouble is that if there is some content underneath this list .. when I click on dt to open the list .. it pushes the underneath stuff down .. another way to look at it would be that if I put it in a div with a boundary .. opening this list will expand the div area .. 

instead I want to just be on top of other elements .. not push them down and not expand the boundary of the container that its in .. I am assuming I will need to do something with zIndex .. I am just not sure what ??

Thanks for any help