I have been assigned a task to convert Flex application to HTML5. I am using JQuery to make it cross browser compatible and not using any HTML5 specific features so it works in all browsers.

As a first step I started created a page to load the XML file and generate the menu.

I loaded the XML file using JQuery and added the code to generate the menu. I tested the code on Windows Firefox 8 and Chrome and it is working fine.

The problem I am facing is with IE7, Only the last link is displayed and not generating the entire menu. I opened a new window with the same content which is generating the menu and the link are displayed correctly as it should without the style-sheet.

I am but unsure if it has something to do with the styles or jquery code which displays the menu in particular form.

I have attached the code, it will be of a great help if someone can point out what the actual issue is. I do not have much experience in Javascript/JQuery.

Here is how it is appearing in IE7

and in Firefox

Source files