Populate a list within a cell

Hi,

I'm trying to populate a datatable cell with an icon and a drop down list. I'm almost there! However when the list pops up it does not appear over whichever cell i clicked on , it always appears over the same cell at all times.

I populate the table as below:

Thanks,
T

  
$(document).ready(function(){

	var oTable = $('.data-table').dataTable({
		"bJQueryUI": true,
		"sPaginationType": "full_numbers",
		"sDom": '<""l>t<"F"fpr>',
		"bProcessing": true,
		"sAjaxSource": "./data-subset.json",
		"aoColumns": [
			{"mDataProp": "date"},
			{"mDataProp": "upload"},
			{"mDataProp": "download"},
			{
				"mDataProp": "status",
				"fnRender": function(oObj) {
					var labelClass;
					if(oObj.aData["status"] == 'Success') {
						labelClass = 'success';
					}
					if(oObj.aData["status"] == 'In Progress') {
						labelClass = 'warning';
					}
					if(oObj.aData["status"] == 'Fail') {
						labelClass = 'important';
					}
					return '<span class="label label-'+labelClass+'">'+oObj.aData["status"]+'</span>';
				}
			},
			{
				"bSearchable": false,
				"bSortable": false,
				"mDataProp": null,
				"fnRender": function(oObj) {

					return '<ul class="unstyled"><li class="dropdown" id="menu-actions">' + 
					'<a href="#" data-toggle="dropdown" data-target="#menu-actions" class="dropdown-toggle btn btn-success">' + 
					'<i class="icon-white icon-cog"></i> <b class="caret"></b><' + 
					'/a><ul class="dropdown-menu">' +
					'<li><a id="actions-list-test" class="sAdd" title="" href="#"><i class="icon-arrow-down"></i> Download</a></li></ul></li></ul>';
				}
			}
		]
	});