Need XSLT Transformation to get Un-ordered List of HTML like structure

Question

I am new to XSLT. I need to transform the below input xml format to the desired output format which is under it (O/P Format is an unorderedList in HTML) using XSLT to use this in a JQuery plugin. I have tried with the below XSLT code myself but i need to add more to it. I am finding hard time to get this transformation done, can any one please help me on this.

Input Format

<Unit id = "2000001">
    <Unit id = "2000002">
        <Unit id = "2000006">
            <Unit id = "2000032">
                <Data>
                    <PartyId>2000032</PartyId>
                    <PartyTypeCode>DEPT</PartyTypeCode>
                    <PartyName>2017964 SM Retirement Party</PartyName>
                </Data>
            </Unit>
            <Unit id = "2000033">
                <Data>
                    <PartyId>2000033</PartyId>
                    <PartyTypeCode>DEPT</PartyTypeCode>
                    <PartyName>2018370 2012 Director's Ornament</PartyName>
                </Data>
            </Unit>
            <Data>
                <PartyId>2000006</PartyId>
                <PartyTypeCode>DEPT</PartyTypeCode>
                <PartyName>Projects Executive</PartyName>
            </Data>
        </Unit>
        <Data>
            <PartyId>2000002</PartyId>
            <PartyTypeCode>SEG</PartyTypeCode>
            <PartyName>Tres Aguilas Management</PartyName>
        </Data>
    </Unit>
    <Data>
        <PartyId>2000001</PartyId>
        <PartyTypeCode>SEG</PartyTypeCode>
        <PartyName>Tres Aguilas Enterprise</PartyName>
    </Data>
</Unit>

Output Format:

<ul>
    <li id = "2000001">
        <span>Tres Aguilas Enterprise</span>
        <ul>
            <li id = "2000002">
                <span>Tres Aguilas Management</span>
                <ul>
                    <li id = "2000006">
                        <span>Projects Executive</span>
                        <ul>
                            <li id = "2000032">
                                <span>2017964 SM Retirement Party</span>                                
                            </li>
                            <li id = "2000033">
                                <span>2018370 2012 Director's Ornament</span>                               
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

XSLT Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

      <xsl:for-each select="//Unit">
      <ul>
          <li><xsl:value-of select="Data/PartyName"/></li>
      </ul>
      </xsl:for-each>

</xsl:template>
</xsl:stylesheet>

Answer 1

:) Thanks a lot Mads Hansen, for contributing to my question. I finally did changes to the XSLT you gave and succeeded in achieving the Transformation to required Format. Here is the final XSLT:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">
    <xsl:output indent="yes"/>

    <!--identity template-->
    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>

    <!--convert every <Unit> into a <UL>, 
        then "push" the attributes(i.e. @id), 
        and then "push" any <Unit> children-->
    <xsl:template match="Unit">

        <xsl:apply-templates select="@*"/>

    </xsl:template>

    <!--Create an <li> and copy the @id attribute,
        then "push" the Data/PartyName that are children of this <Unit>-->
    <xsl:template match="Unit/@id">

        <li>
            <xsl:copy/>
            <xsl:apply-templates select="../Data/PartyName"/>
            <xsl:if test= "../Unit">
                <ul>
                    <xsl:apply-templates select="../Unit"/>
                </ul>
            </xsl:if>
        </li>

    </xsl:template>

    <!--convert <PartyName> into <span> -->
    <xsl:template match="Data/PartyName">
        <span>
            <xsl:value-of select="."/>
        </span>
    </xsl:template>

</xsl:stylesheet>

Answer 2

This is a "push style" stylesheet that achieves what you want.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">
    <xsl:output indent="yes"/>

    <!--identity template-->
    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>

    <!--convert every <Unit> into a <UL>, 
        then "push" the attributes(i.e. @id), 
        and then "push" any <Unit> children-->
    <xsl:template match="Unit">
        <ul>
            <xsl:apply-templates select="@*"/>
        </ul>
    </xsl:template>

    <!--Create an <li> and copy the @id attribute,
        then "push" the Data/PartyName that are children of this <Unit>-->
    <xsl:template match="Unit/@id">
        <li>
            <xsl:copy/>
            <xsl:apply-templates select="../Data/PartyName"/>
            <xsl:apply-templates select="../Unit"/>
        </li>
    </xsl:template>

    <!--convert <PartyName> into <span> -->
    <xsl:template match="Data/PartyName">
        <span><xsl:value-of select="."/></span>
    </xsl:template>

</xsl:stylesheet>