<ui> and <li> style not applied inside the fnrowcallback for datatable
Hi i am populating the datatable dynamically using
fnrowcallback event but im facing the problem while using <ui> and <li>
here is the code im using :
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(6)', nRow).html('<table cellpadding="3" cellspacing="0" width="100%" border="0">'+
'<tr>'+
'<td> <a href="#" id="opener"><div class="todoCountClass">'+
'<div class="redbgInfo">'+ aData[5] +'</div>'+
'</div>'+'</a>'+'</td>'+'<td>'+
'<a href="#" id="opener1"><div class="calenderCountClass">'+
'<div class="redbgInfo">'+ aData[6] +'</div>'+
'</div></a>'+
'</td>'+
'<td><img src="images/webmeetingList.png" class="imageopacitylow"/></td>'+
'<td><img src="images/exchange.png" class="imageopacitylow"/></td>'+
'<td><a href="./documents.html"><img src="images/docCollection.png"/></a></td>'+
'<td><a href="./users.html" ><img src="images/user.png"/></a></td>'+
'<td><img src="images/searchToolIcon.png"/></td>'+
'<td><div class="grey" style="width:55px; padding-right:20px;">'+
'<ul id="mega-menu-8" class="mega-menu">'+
'<li style="vertical-align:baseline;"><a href="#">More</a>'+
'<ul>'+
'<li><a href="#">Work Zone</a></li>'+
'<li><a href="#">Templates</a></li>'+
'</ul>'+
'</li>'+
'</ul>'+
'</div>
</td>'+
'</tr>'
}
Error Page:

Im getting the following error in the resulting page, Help me to resolve this issues.
thanks
R.Ramesh