How to construct 3 level grouping usng xslt 1.0 - Sharepoint 2007

Question

I have this XML output from a sharepoint list

<z:row ows_Attachments="0" 
ows_Title="Parra"
ows_State="State" 
ows_Area="Area 4"/>
<z:row ows_Attachments="0" 
ows_Title="matta"
ows_State="State" 
ows_Area="Area 4"/>

This is my xsl below:

  <ul id="navigation">
  <xsl:for-each select="/dsQueryResponse/Rows/Row[generate-id(.)=generate-id(key('stateKey', @State))]">
  <xsl:sort select="@State" order="ascending"/>
    <xsl:variable name="State" select="@State"/>


    <li> <xsl:value-of select="@State" />
        <ul>

            <xsl:for-each select="../Row[generate-id() = generate-id(key('areaKey', @Area)[@State= $State][1])]">
                <xsl:sort select="@Area" order="ascending"/> 
            <xsl:variable name="Area" select="@Area"/>

            <li>
            <xsl:for-each select="key('areaKey', @Area)[@State = $State and @Area = $Area]">
             <xsl:value-of select="@Area"></xsl:value-of>


                <ul>


                        <li> <xsl:value-of select="@Title"/></li>


                </ul>
               </xsl:for-each>

            </li>
             </xsl:for-each>


         </ul>
      </li>
       </xsl:for-each>

    </ul>

What i have now looks like this:

State
   -- Area 4
          --- Parra
    -- Area 4
          --- matta

what i want is

State
   -- Area 4
          --- Parra
          --- matta

I need a distinct Area to group Any help would be appreciated. Thanks

---

Thanks Anders for that i did actuall use position() =1 and it worked. But i have one more problem with the output

The output i have now is :

<li class="collapsable">
<div class="hitarea collapsable-hitarea">
</div>
Area 1 - (6)
<ul style="display: block;">
                <li class="text last"><a href="?tcode=#220" class="">town</a></li>
</ul>
<ul style="display: block;">
                <li class="text last"><a href="?tcode=#227" class="">Mt </a></li>
</ul>
<ul style="display: block;">
                <li class="text last"><a href="?tcode=#233" class="">matta</a></li>
</ul>
<ul style="display: block;">
                <li class="text last"><a href="?tcode=#234">rith</a></li>
</ul>
<ul style="display: block;">
                <li class="text last"><a href="?tcode=#221" class="">Hill</a></li>
</ul>
<ul style="display: block;">
                <li class="text last"><a href="?tcode=#266" class="">Ryde</a></li>
</ul>
</li>

But whant i need is:

<li class="collapsable">
<div class="hitarea collapsable-hitarea "></div>
<a href="?/enewsletterss/index.cfm" class="">Area 1</a>
                    <ul style="display: block;">
                            <li>town</li>
                            <li>Mt </li>
                            <li class="last">matta</li>
                        </ul>

                </li>

Thanks in Advance

Answer 1

There are several XSLT functions available to test for this.for example:        

<xsl:if test="position() = first()">
                      <xsl:value-of select="@Area"></xsl:value-of>
</xsl:if>

Do a search for XSLT first for more details