Normalizing XML adjacency list model into HTML tree list - xslt

Question

I've seen examples of transforming "adjacency model" XML but none that will do it quite right for a ul/li bullet list. Could someone give me a hint? It would be great if the solution could support typical adjacency model requirements and deal with multiple level nesting/recursion.
If the XML is:
<?xml version="1.0" encoding="ISO-8859-1"?>
<root>
<row Id="2" Name="data" />
<row Id="3" Name="people" />
<row Id="4" Name="person" ParentId="3" />
<row Id="6" Name="folder" ParentId="2" />
<row Id="7" Name="thing" ParentId="3" />
<row Id="8" Name="web" />
<row Id="9" Name="link" ParentId="8" />
</root>
And I use something like:
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<ul id="someid" class="menu">
<xsl:apply-templates select="root/row[not(#ParentId)]"/>
</ul>
</xsl:template>
<xsl:template match="row">
<ul>
<li>
<xsl:variable name="ID" select="#Id"/>
<xsl:attribute name="rel">
<xsl:value-of select="#Id"/>
</xsl:attribute>
<xsl:value-of select="#Name"/>
<xsl:apply-templates select="//row[#ParentId=$ID]"/>
</li>
</ul>
</xsl:template>
</xsl:stylesheet>
Then I get:
<ul id="someid" class="menu">
<ul>
<li rel="2">
data<ul>
<li rel="6">folder</li>
</ul>
</li>
</ul>
<ul>
<li rel="3">
people
<ul>
<li rel="4">person</li>
</ul><ul>
<li rel="7">thing</li>
</ul>
</li>
</ul>
<ul>
<li rel="8">
web<ul>
<li rel="9">link</li>
</ul>
</li>
</ul>
</ul>
Note the extra close/open ul tags between the "person" and "thing" li's- shouldn't be there. I can see why it's happening but just not sure how to change the code to fix it.
Thanks.

Answer 1

Updated to reflect OP new requests
This is a recursive template which does an HTML-compliant nested list as deinfed in the W3C specs.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output indent="yes"/>
<xsl:template match="/root">
<ul id="someid" class="menu">
<xsl:apply-templates select="row[not(#ParentId)]"/>
</ul>
</xsl:template>
<xsl:template match="row">
<li rel="{#Id}">
<xsl:value-of select="#Name"/>
<xsl:if test="count(../row[#ParentId=current()/#Id])>0">
<ul>
<xsl:apply-templates select="../row[#ParentId=current()/#Id]"/>
</ul>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
Applied on this input:
<root>
<row Id="1" Name="data" />
<row Id="2" Name="data" />
<row Id="3" Name="people" />
<row Id="4" Name="person" ParentId="3" />
<row Id="6" Name="folder" ParentId="2" />
<row Id="7" Name="thing" ParentId="3" />
<row Id="8" Name="web" />
<row Id="9" Name="link" ParentId="8" />
<row Id="10" Name="anotherone" ParentId="9" />
<row Id="11" Name="anotherone" ParentId="9" />
<row Id="12" Name="anotherone" ParentId="9" />
<row Id="13" Name="anotherone" ParentId="3" />
</root>
Produces:
<ul id="someid" class="menu">
<li rel="1">data</li>
<li rel="2">data<ul>
<li rel="6">folder</li>
</ul>
</li>
<li rel="3">people<ul>
<li rel="4">person</li>
<li rel="7">thing</li>
<li rel="13">anotherone</li>
</ul>
</li>
<li rel="8">web<ul>
<li rel="9">link<ul>
<li rel="10">anotherone</li>
<li rel="11">anotherone</li>
<li rel="12">anotherone</li>
</ul>
</li>
</ul>
</li>
</ul>
If you are in trouble about how list should be created, try them at W3School.

Answer 2

You are really close, you just need to move your <xsl:variable name="ID" select="#Id"/> and your <xsl:apply-templates select="//row[#ParentId=$ID]"/> outside of your <ul>...</ul> statement.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<ul id="someid" class="menu">
<xsl:apply-templates select="root/row[not(#ParentId)]"/>
</ul>
</xsl:template>
<xsl:template match="row">
<xsl:variable name="ID" select="#Id"/>
<li>
<xsl:attribute name="rel">
<xsl:value-of select="#Id"/>
</xsl:attribute>
<xsl:value-of select="#Name"/>
</li>
<xsl:if test="//row[#ParentId=$ID]">
<ul>
<xsl:apply-templates select="//row[#ParentId=$ID]"/>
</ul>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
this produces the result I think you are looking for
<ul id="someid" class="menu">
<li rel="2">data</li>
<ul>
<li rel="6">folder</li>
</ul>
<li rel="3">people</li>
<ul>
<li rel="4">person</li>
<li rel="7">thing</li>
</ul>
<li rel="8">web</li>
<ul>
<li rel="9">link</li>
</ul>
</ul>
this also removes the extra <ul> before the top level <li rel="2">