Left navigation menu populated by XML doesnt apply the CSS formatting

[IdentityX]

I have an issue with the navigation menu which I am creating for a content page. Here is my Div which takes the navigation\[code\] <ul id="nav"> <li>Introduction <ul class="acc-section"> <li><a class="navLink" id="home" href="http://stackoverflow.com/questions/11380515/#" title="Home">Home</a></li><li><a href='http://stackoverflow.com/questions/11380515/HomePage.html'>Home Page</a></li> </ul> </li> <li>Product Information <ul class="acc-section"> <li><a href='http://stackoverflow.com/questions/11380515/#'>Link_2</a></li> </ul></li></ul>\[/code\]here I am trying to append with the following XML file\[code\]<nav><section label="Introduction"> <link page="home.html" label="Introduction" title="Windows 8 - Home" Audience="ALL" /> <link page="getting_started.html" label="Using this Material" title="Using this Material" Audience="ALL"/> <link page="course_introduction.html" label="Course Overview" title="Course Overview" Audience="ALL" /> </section><!-- Introduction: End --><!-- Content: Begin --><section label="Overview"> <link page="home4.html" label="Introduction2" title="Wind2ows 8 - Home" Audience="ALL" /> <link page="getting_started4.html" label="Usin2g this Material" title="Using this Mate2rial" Audience="ALL"/> <link page="course_introduction4.html" label="Cour2se Overview" title="Course Overview2" Audience="ALL" /></section><!-- Appendixes: End --></nav>\[/code\]for some reason, the CSS does not apply on the newly appended code, but applies on the original html part of the file. I know I must be doing something silly, but would appreciate any help on this. Here is the jquery i am using\[code\]$(document).ready(function () { loadXML(); $("#nav li:has(ul)").click(function (event) { if (this == event.target) { $(this).toggleClass('clicked').children('ul').slideToggle(); $(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp(); $(this).siblings().removeClass('clicked').find("ul").slideUp(); } }).addClass('has_ul');});function loadXML() { XMLfilePath = setLang + '/' + 'navigation.xml'; var sectionLinks = ''; $.ajax({ type: "GET", //async = false, url: XMLfilePath, dataType: "xml", success: function(xml) { alert("it came here"); $(xml).find('section').each(function() { var sectionName = $(this).attr('label') //$('<li><ul class="acc-section"></ul></li>').html(sectionName).appendTo('ul#nav'); $(this).find('link').each(function() { var linkPageId=($(this).attr('page')).replace('.html',''); var linkPageTitle = $(this).attr('title'); var linkPageLabel=$(this).attr('label'); var Linkline = '<li><a class="navLink" id="' + ($(this).attr('page')).replace('.html','') + '" href="http://stackoverflow.com/questions/11380515/#" title="' + $(this).attr('title') + '">' + $(this).attr('label') + '</a></li>'; sectionLinks = sectionLinks + Linkline; }); $('ul#nav').append('<li>' + $(this).attr('label')+'<ul class="acc-section">'+ sectionLinks +'</ul></li>'); sectionLinks = ""; }); } });};\[/code\]When I run the code, the list populates fine, but the class doesnt apply for the added DOM content, but applies only for the original DOM content. Can you please help... Thanks